如何将数据绑定到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属性？

回答

相关问题