如何使用角度循环自举模态？

Question

我的component.ts文件有一个数组：

dummyData = ['1', '2', '3'];

我想在创建显示1,2和3的3个模态时循环遍历此数组。

我的HTML：

    <div *ngFor="let data of dummyData">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{data}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

我的猜测是，我不得不为每个模态创建单独的id和数据目标值。但我不知道该怎么做。任何意见是极大的赞赏。

Answer 1

如果坚持引导

<div *ngFor="let data of dummyData">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal{{data}}">
    Launch demo modal
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal{{data}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{data}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

根据每个数组元素的内容为每个按钮和模态提供唯一的id。

Answer 2

vanilla Bootstrap的问题是你不能用* ngFor循环并在你的id中使用字符串插值，你会得到一个错误，引导程序无法识别该元素。

你需要使用ngBootstrap但是如果你想要自定义它的外观，你会很快就会头痛。我建议使用Material，因为它是由Angular团队构建的，这使得它成为真正的宝藏。