如何使ngfor始终从角度的第一个位置开始 [英] how to make a ngfor always start from the first position in angular
问题描述
我有一个用于显示轮播的循环（我正在使用ngx-bootstrap轮播），问题是当我单击查看详细信息并且如果更改模式滑块的图像时，我将关闭模式并在其中打开另一个图像主轮播从打开前一个模式时的位置开始。我解释：单击查看详细信息，然后打开2个轮播，在其中显示该房屋/公寓的所有图像，如果更改图像，例如，当我关闭该模式并打开时，它会转到第三个图像另一个模态，这个模态的旋律开始向我展示来自第三张照片的图像，好像循环不是从0开始，而是从我之前离开的地方开始。如何才能使模态内部的循环始终从向量的第一个值开始？如果这是简单的cliclo，那么一切都会更轻松，那么xq会启动始终在 0中进行迭代的变量，但是该如何处理呢？然后我留下代码，看看他们是否可以帮助我，我在其中花了几个小时而无法解决。
I have a cycle for use to show a carousel (I'm using the ngx-bootstrap carousel) the problem is that when I click on "see details" and if I change the images of the modal slider, I close the modal and open another image in The main carousel starts from the position where it was when opening the previous modal. I explain: I click on "see details" and the 2 carousel opens where I show all the images of that house / apartment, if I change the images and for example, it goes to the third image, when I close that modal and open another modal, the caoursel of this modal begins to show me the images from the third photo, it is as if the cycle did not start from 0, it starts from where I left before. How could I do so that the cycle that is inside the modal always starts from the first value of the vector? if it were a cliclo for simple everything would be easier, xq start the variable that always iterates in "0", but how do I do with this cycle? then I leave the code that I have to see if they can help me, I have hours in this and I can not solve.
这是第一个轮播的代码我在其中拥有查看详细信息按钮的
This is the code of the first carousel where I have the button "see details"
<div class="container" >
<div class="d-flex justify-content-center align-items-center">
<div class="d-flex align-items-center justify-content-center">
<div> <span class="text-hot">
<b>HOT</b> </span> </div>
</div>
<div id="div-redondo" class="d-flex ml-2 align-items-center justify-content-center">
<div class="text-hot align-middle">
list
</div>
</div>
</div>
</div>
<!-- Imagen de Pre-Carga-->
<div class="container-fluid d-flex justify-content-center" id="cont-preCarga" *ngIf="preCarga">
<img src="../../assets/images/slider/spinner.gif">
</div>
<app-modal [inmueble]="this.inmueble2" class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
<carousel [itemsPerSlide]="itemsPerSlide"
[singleSlideOffset]="singleSlideOffset"
[interval]="false"
[noWrap]="noWrap"
[startFromIndex]="5">
<slide class="col-md-2" *ngFor="let imagenPortada of this.hostlistService.inmuebles; let index=index" style="width: 500px;">
<img src="{{url}}{{imagenPortada.id}}_{{imagenPortada.fotos[0]}}" alt="imagen de slide" style="display: block; width: 100%; height: 300px;">
<!--<img src="../../assets/images/slider/logo.png" alt="imagen de slide" style="z-index: 10; width: 100%; height: 300px; position: absolute; left: 0; top:0;">-->
<!-- <div class="carousel-caption">
<h4>Slide {{index}}</h4>
</div> -->
<div class="row">
<div class="col-12">
<p class="text-left text-precio"> <i class="fas fa-dollar-sign">
</i> Precio: {{imagenPortada.precio | currency: 'USD':true:'1.2-2'}}
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="text-left"> <i class="fas fa-map-marker-alt"></i> Ubicacion: {{imagenPortada.precio | currency: 'USD':true:'1.2-2'}}
</p>
</div>
</div>
<div class="row">
<div class="d-flex col-12">
<div class="cont-verDetalles d-flex justify-content-center">
<button (click)="obtenerInfo(imagenPortada)" type="button" class="mt-2 btn btn-secondary" data-toggle="modal" data-target="#exampleModal2">Ver detalles</button>
</div>
</div>
</div>
</slide>
</carousel>
模态代码，在那里我遇到了另一个大问题。
and here is the modal code, where I have the other carousel that is where I have the big problem:
<!-- <h1> Tipo Inmueble: {{tipo}}</h1> -->
<!-- <div *ngIf="tipo!=''"> REVISAR CONDICION-->
<div *ngIf="inmueble !== undefined">
<div *ngIf="inmueble.tipo=='CA' || inmueble.tipo=='APTO' ; else opcion"> -->
<div class="modal-dialog modal-lg" role="document">
<div class="container-fluid">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title text-center" style="width: 100%;" role="alert"> <h3 class="texto-helvetica">{{inmueble.nombre}}</h3> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<carousel [itemsPerSlide]="itemsPerSlide"
[singleSlideOffset]="singleSlideOffset"
[interval]="false"
[noWrap]="noWrap"
[startFromIndex]="5">
<slide class="col-md-12" *ngFor="let imagen of inmueble.fotos;" style="max-width: 100%;">
<!--<ngui-in-view>
<img class="img-fluid" *ngIf src="{{url}}{{inmueble.id}}_{{imagen}}" alt="imagen de slide" style="display: block; width: 100vw; height: 300px;">
</ngui-in-view> -->
<img class="img-fluid" src="{{url}}{{inmueble.id}}_{{imagen}}" alt="imagen de slide" style="display: block; width: 100vw; height: 300px;">
</slide>
</carousel>
</div>
</div>
<div class="row mt-4" id="fila-descripcion" >
<div class="col-md-12" id="cont-descripcion">
<h3 class="text-center texto-helvetica"><span class="texto-blanco">Descripcion</span></h3>
</div>
</div>
<div class="row mt-4 pl-2 pr-2 pb-2">
<div class="col-md-12" id="cont-descripcion">
<p class="texto-helvetica text-justify">{{inmueble.descripcion}}</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> <i class="fas fa-map-marker-alt fa-2x"></i> Ubicacion: </p>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4 col-4 d-flex justify-content-center">
<p class="text-center"> <i class="fas fa-bath fa-2x "></i> <br> Baños: {{inmueble.bano}} <p>
</div>
<div class="col-md-4 col-4">
<p class="text-center"> <i class="fas fa-hot-tub fa-2x"></i> <br> Baños de Servicio: {{inmueble.banoServicio}} <p>
</div>
<div class="col-md-4 col-4">
<p class="text-center"> <i class="fas fa-bed fa-2x "></i> <br> Habitaciones: {{inmueble.habitacion}} <p>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 col-4 d-flex justify-content-center">
<p class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br> metros construidos: {{inmueble.metroConstruido}} <p>
</div>
<div class="col-md-4 col-4">
<p class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br> metros de terreno: {{inmueble.metroTerreno}} <p>
</div>
<div class="col-md-4 col-4">
<p class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br> Pago de Condominio: {{inmueble.condominio}} <p>
</div>
</div>
<div class="row mt-2 d-flex justify-content-center">
<div class="col-md-4 col-4 d-flex justify-content-center">
<p class="text-center"> <i class="fas fa-car fa-2x"></i> <br> estacionamientos: {{inmueble.estacionamiento}} <p>
</div>
<div class="col-md-4 col-4">
<p class="text-center"> <i class="fas fa-home fa-2x"></i> <br> antiguedad: {{inmueble.antiguedad}} <p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<ng-template #opcion>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</ng-template>
</div>
</div>
在此先感谢所有可以提供帮助的人我。
thanks in advance to everyone who can help me. Regards!
推荐答案
这是示例通过使用 BsModalService ，从其中复制模式和轮播文档。我注意到您使用了另一种模式的模态，但是由于您导入ngx-bootstrap时，您还可以使用它自己的模态api。
This is an example of the dynamic modal by using the BsModalService, where I copy paste code from modal and carousel docs. I noticed your using another type of modal but since your importing ngx-bootstrap you might aswell use it's own modal api.
我为您了解的问题是状态打开静态模态时，示例中的轮播中的值保持不变。这不是理想的行为。使用API的这一部分，您只需在每次打开应用程序时在其根目录中动态填充一个新的模式组件，并在从DOM中将其关闭时销毁它。
The problem that I understand for you was that the state in your carousel from your example stays at the same index when opening the static modal. which is not the desired behavior. With this part of the API you simply dynamically populate a new modal component to the root of your app each time you open it and destroy it when you close it from the DOM.
export class DemoModalServiceFromComponent {
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModalWithComponent() {
this.bsModalRef = this.modalService.show(ModalContentComponent);
this.bsModalRef.content.closeBtnName = 'Close';
}
}
提示：您有实现自己的轮播索引以及轮播设置首选的
。
Tip: You have to implement yourself the index of the carousel along with the carousel settings preferd.
这篇关于如何使ngfor始终从角度的第一个位置开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
