Как я могу показать информацию о каждом изображении карусели в модале? - PullRequest
Новая
       27

Как я могу показать информацию о каждом изображении карусели в модале?

0 голосов
/ 24 июня 2019

Я работаю с Angular и использую карусель Ngx-Bootstrap, но у меня небольшая проблема. У меня есть кнопка «Посмотреть подробности» внутри каждого изображения карусели, которая открывает модальное окно с информацией об этом изображении, всей этой информацией, имеющейся у меня в this.hostlistService.inmuebles, которая является не более чем простым вектором, по которому я итерирую в цикл, проблема в том, что я не могу думать о том, как ссылаться на модальное положение этого изображения, когда я нажимаю на кнопку «Просмотр деталей», я хочу, чтобы, когда я нажимаю на изображение, оно показывало мне информацию о это изображение, которое содержится в: this.hostlistService.inmuebles. и так для всех изображений. Как я мог это сделать? мне нужно иметь ссылку на каждое изображение в векторе, чтобы можно было показать всю информацию об этом изображении в этой позиции. То, что я сейчас имею в модале, это просто тест, который я проводил. Здесь я оставляю изображение кода и изображение показа карусели.

Это код, где у меня есть карусель Ngx-Bootstrap: 

<app-modal [tipo]="this.hostlistService.inmuebles[c].tipo" [descrip]="this.hostlistService.inmuebles[c].descripcion" [nombre]="this.hostlistService.inmuebles[c].nombre" 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">
  <slide *ngFor="let imagenPortada of this.hostlistService.inmuebles; let index=index" class="col-md-2 col-12" style="width: 500px;">
    <img src="{{url}}{{imagenPortada.id}}_{{imagenPortada.fotos[0]}}" alt="imagen de slide" style="display: block; width: 100%; height: 300px;">
    <!-- <div class="carousel-caption">
      <h4>Slide {{index}}</h4>
    </div> -->
    <div class="d-flex justify-content-center">
      <button type="button" class="mt-2 btn btn-secondary" data-toggle="modal" data-target="#exampleModal2">Ver detalles</button>
      
    </div>
  </slide>
</carousel>

Это изображение карусели, которая у меня есть, поэтому у вас есть идея:

введите описание изображения здесь

Я был бы очень признателен человеку, который может мне помочь. Заранее спасибо.

1 Ответ

0 голосов
/ 24 июня 2019

Не передавайте входные параметры вашему модальному компоненту.Вместо этого используйте <ng-content></ng-content>

Теперь, у вас есть новый компонент <app-image-detail>, который будет отображать детали изображения внутри модального диалога.

Теперь компонент станет, 

<app-modal #imageInfoModal>
    <app-image-detail [imageInfo]='selectedImageInfo'></app-image-detail>
</app-modal>

При нажатии кнопки «Подробнее» обновите новую переменную selectedImageInfo содержимым из this.hostlistService.inmuebles и откройте диалоговое окно. Таким образом будет вызван метод 

// Intialize modal dialog 
......
@ViewChild("imageInfoMofal") modalDialog = new ModalComponent(); // your <app-modal>
..... 
onButtonClick(imageInfo) {
  this.selectedImageInfo = imageInfo; // from this.hostlistService.inmuebles
  this.modalDialog.show(); 
}

onButtonClick

<button type="button" class="mt-2 btn btn-secondary" (click)="onButtonClick(imagenPortada)">Ver detalles</button>
...