Question

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

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

我将有许多这些条目，我想使用bootstrap中的expand / collapse。为了使其工作，每个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/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会进行属性绑定。在您的情况下，您需要属性绑定：

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

或

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

Answer 2

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

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

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

2 个答案: