Angular4のhtml属性にデータをバインドする方法はありますか？

Question

* ngForディレクティブを使用して一連のdivを設定しています。私はまた、CSSのブートストラップライブラリを使用しています。

<div data-toggle="collapse" data-target="#toggleDemo"*ngFor="let pair of pairings"> 
    <div data-target="#toggleDemo"> 
    </div> 
</div> 

これらのエントリが多数あり、ブートストラップからの展開/折りたたみを使用したいと考えています。これを機能させるには、各divに一意のデータターゲット属性値が必要です。

私の 'ペア'オブジェクトのプロパティの1つを使用したいと思いますが、試してみるたびにエラーが発生します。

Angular4でこれを行うことはできますか？

<div data-target="#toggleDemo-"{{ pair.id }}> 

編集：私はこのアプローチ

<div data-toggle="collapse" data-target="#toggleDemo-{{ pair.id }}"> 

を試してみました、私はこのエラーを取得

：

Template parse errors: 
Can't bind to 'target' since it isn't a known property of 'div'. ("v class="row" *ngFor="let pair of pairings"> 
      <div class="wall col-sm-2" data-toggle="collapse" [ERROR ->]data-target="#toggleDemo-{{ pair.buyer.phone }}"> 
       <p>{{ pair.buyer.name.first }} {{ pair.buyer.na"): ng:///AppModule/PairingsComponent.html@4:52 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors: 
    Can't bind to 'target' since it isn't a known property of 'div'. ("v class="row" *ngFor="let pair of pairings"> 

編集：

私が試してみました何の答えを提案するが、ソルートのどれもイオンが放出された。

Answer 1

は、プロパティがバインディングありません。

<div attr.data-target="#toggleDemo-{{ pair.id }}"> 

または

<div [attr.data-target]="'#toggleDemo-' + pair.id"> 

Answer 2

絶対に、補間と中括弧をその中の文字列に含めてください。デフォルトでは、角度

<div data-target="#toggleDemo-{{ pair.id }}">