如何将数据绑定到 Angular4 中的 html 属性？

Question

我正在使用 *ngFor 指令来填充一系列 div。我也在使用 css 的 bootstrap 库。

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

我将有许多这样的条目，我想使用 bootstrap 中的展开/折叠。为了让它起作用，每个 div 必须有一个唯一的 data-target 属性值。

我想使用我的“配对”对象中的一个属性，但每次尝试时，我都会收到错误消息。

在 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

Angular by default does property binding. In your case you need attribute binding because that property is not reflected to an attribute automatically:

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

or

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