如何將數據綁定到Angular4的html屬性？

我正在使用* ngFor指令來填充一系列div。我也使用CSS的引導庫。如何將數據綁定到Angular4的html屬性？

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

我將要有一些這些條目，我想從bootstrap使用展開/摺疊。爲了得到這個工作，每個div必須有一個唯一的數據目標屬性值。

我想使用我的'pair'對象中的某個屬性，但是每次嘗試它時都會出現錯誤。

在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/[email protected]: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">

編輯：

我已經試了一下答案建議，但沒有解決方案離子解決了。

來源

2017-04-15 user1261710

Angular默認情況下屬性綁定。在你的情況，你需要的屬性綁定：

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

或

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

來源

2017-04-15 20:58:49

我嘗試了這兩個，他們不工作。 – user1261710

「不行」意味着什麼？像以前一樣的錯誤medsage？ –

第二個沒有錯誤，但沒有進行切換，第一個在控制檯中有一個解析錯誤，就像我在問題中發佈的錯誤。 – user1261710

當然，只需在字符串中包含插值和花括號即可。

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

來源

2017-04-15 20:16:34 zigzag

它並沒有爲我工作了。有一個解析錯誤。 – user1261710

你能在這裏包括錯誤嗎？ – zigzag

如何將數據綁定到Angular4的html屬性？

回答

相關問題