javascript - 在 Angular2 中动态绑定(bind)模型

Question

我想在 Angular2 中动态绑定(bind)模态。这是我的代码

<div *ngFor="let interest of interest_data;" class="row">
    <a class="btn btn-xs btn-link" data-toggle="modal" data-target="#{{interest.id}}">
       <i class="fa fa-pencil"></i>
    </a>
</div>

目标模态元素如下

<div *ngFor="let interest of interest_data;">
    <div class="modal fade" id="interest.id"  tabindex="-1" role="dialog"
    aria-labelledby="modalLabel" aria-hidden="true">
    </div>
</div> 

它不工作。正确的做法是什么？

Answer 1

尝试使用 [attr.data-target] 和 [attr.id]。我想你想做这样的事情:

<div *ngFor="let interest of interest_data;">

  <div>
    <a class="btn btn-xs btn-link" data-toggle="modal" [attr.data-target]="'#' + interest.id">
      open modal
      <i class="fa fa-pencil"></i>
    </a>
  </div>

  <div class="modal fade" [attr.id]="interest.id" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        modal data
      </div>
    </div>
  </div>

</div>

确保包含 JQuery 和 bootstrap.js。

干杯