在angular2中動態綁定模型

Question

我想在Angular2中動態綁定模式。 這是我的代碼

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

干杯