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

香草Bootstrap的问题在于，您无法使用* ngFor循环并在ID中使用字符串插值，您将得到一个错误，即引导程序无法识别该元素。

如果您要自定义外观，则需要使用ngBootstrap，但很快就会头疼。我建议使用Material，因为它是由Angular团队开发的，并且是与Angular团队合作使用的，这使它成为与之合作的真正宝藏。

如何使用角度循环遍历bootsrap模态？

2 个答案: