如何使用 For 循环 Angular6 动态创建引导模式

Question

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

在上面的代码中，我无法为按钮动态添加数据目标。我已经通过this 但这只是一次修改所有模态并且具有相同的名称。

提前感谢您的帮助。

Answer 1

你必须使用[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>