как сделать так, чтобы нг всегда начинался с первой позиции в угловых - PullRequest
Новая
       74

как сделать так, чтобы нг всегда начинался с первой позиции в угловых

1 голос
/ 03 июля 2019

У меня есть цикл для показа карусели (я использую карусель ngx-bootstrap), проблема в том, что когда я нажимаю «посмотреть детали» и если я изменяю изображения модального слайдера, я закрываю Модальное и откройте другое изображение в главной карусели начинается с позиции, в которой она была при открытии предыдущего модального. Я объясняю: я нажимаю «посмотреть детали», и открывается 2 карусель, где я показываю все изображения этого дома / квартиры, если я меняю изображения и, например, он переходит к третьему изображению, когда я закрываю этот модальный и открываю другой модал, каузель этого модала начинает показывать мне изображения с третьей фотографии, как будто цикл не начинается с 0, он начинается с того места, где я ушел раньше. Как я могу сделать так, чтобы цикл внутри модального всегда начинался с первого значения вектора? если бы это был простой щелчок, все было бы проще, xq запускает переменную, которая всегда повторяется в «0», но как мне поступить с этим циклом? затем я оставляю код, который мне нужно посмотреть, могут ли они мне помочь, у меня есть часы в этом, и я не могу решить.

Это код первой карусели, где у меня есть кнопка «посмотреть детали» 

<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>

и вот модальный код, где у меня есть другая карусель, где у меня большая проблема: 

<!-- <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">&times;</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>

Заранее спасибо всем, кто может мне помочь. Привет!

1 Ответ

0 голосов
/ 04 июля 2019

Это пример динамического модального режима с использованием BsModalService , куда я копирую код вставки из модальных и каруселей документов,Я заметил, что вы используете другой тип модальности, но поскольку вы импортируете ngx-bootstrap, вы также можете использовать его собственный модальный API.

Проблема, которую я понимаю для вас, состояла в том, что состояние вашей карусели из вашего примера остается натот же индекс при открытии статического модала.что не является желаемым поведением.С помощью этой части API вы просто динамически заполняете новый модальный компонент в корне своего приложения каждый раз, когда открываете его и уничтожаете при закрытии его из DOM. 

export class DemoModalServiceFromComponent {
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModalWithComponent() {

    this.bsModalRef = this.modalService.show(ModalContentComponent);
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}

Совет:Вы должны сами реализовать индекс карусели вместе с предпочитаемыми настройками карусели.

...