Как я могу динамически создать Bootstrap Modal, используя цикл For Angular6 - PullRequest
Новая
       23

Как я могу динамически создать Bootstrap Modal, используя цикл For Angular6

1 голос
/ 22 апреля 2019 
<div *ngFor="let task of data ; let i = index" [attr.data-index]="i">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <div class="modal fade" id="{{task.id}}">
    //HTMl Content
  </div>
</div>

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

Спасибо за вашу помощь заранее.

1 Ответ

0 голосов
/ 22 апреля 2019

Вы должны будете использовать [attr.data-target]="'#MyModal'+task.id" ... с учетом структуры данных: 

this.data = [
       {id:1, buttonLabel: 'test label 1', modalBody: 'Demo Modal body contents #1' }
      ,{id:2, buttonLabel: 'test label 2', modalBody: 'Demo Modal body contents #2' }
      ,{id:3, buttonLabel: 'test label 3', modalBody: 'Demo Modal body contents #3' }
      ];

Это будет HTML: 

<div *ngFor="let task of data ; let i = index" [attr.data-index]="i">
  <button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#MyModal'+task.id">
    Open modal
  </button>
</div>
...