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

【问题标题】：How can I bind data to the html attribute in Angular4?如何将数据绑定到 Angular4 中的 html 属性？
【发布时间】：2020-06-16 01:58:53
【问题描述】：

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

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

我将拥有许多这样的条目，并且我想从引导程序中使用展开/折叠。为了让它工作，每个 div 必须有一个唯一的 data-target 属性值。

我想使用“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/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">

编辑：

我已经尝试了答案的建议，但没有一个解决方案奏效。

【问题讨论】：

标签： html twitter-bootstrap angular attributes tags

【解决方案1】：

Angular 默认进行属性绑定。在您的情况下，您需要属性绑定，因为该属性不会自动反映到属性：

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

或

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

【讨论】：

“不工作”到底是什么意思？和以前一样的错误信息？
第二个没有错误，但没有进行切换，第一个在控制台中有解析错误，就像我在问题中发布的一样。
对不起，第一个有多余的"。 “它不进行切换”是什么意思
两者都应该这样做。感谢您的反馈。
太棒了！像魅力一样工作。

【解决方案2】：

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

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

【讨论】：