问题
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!
回答1:
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.
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.
来源：https://stackoverflow.com/questions/56874288/how-to-make-a-ngfor-always-start-from-the-first-position-in-angular