在ngFor中动态分配元素id

Question

我是Angular 2的新手,我试图为*ngFor中的div提供一个动态分配的id.我希望这些div被称为'wave1,wave2,wave3'等.

<li *ngFor="let episode of episodes; let i = index">
    <div id="wave{{i}}"></div>
</li>

但是,这会引发以下错误:

ERROR DOMException: Failed to execute 'querySelector' on 'Document':
     '#wave[object Object]' is not a valid selector.

我还没有能够在stackoverflow上为Angular 2找到答案.如果这是重复的道歉

Answer 1

你可以用{{ 'wave' + i }}而不是wave{{i}}.使其成为角度表达.这是完整的ngFor:

<li *ngFor="let episode of episodes; let i = index">
     <div id="{{ 'wave' + i }}"></div>
</li>

它工作并创造div正确的id

document.getElementById("wave1")

输出将是这样的:

<div id=?"wave1">?wave1?</div>

但要记住你的代码就可以开始wave0为i = index从0开始.

Answer 2

你不需要定义i

<li *ngFor="let episode of episodes">
    <div id="wave{{episode}}">{{episode}}</div>
</li>

编辑：如果剧集是对象列表

<li *ngFor="let episode of episodes">
    <div id="wave{{episodes.indexOf(episode)}}">{{episode.name}}</div>
</li>

Answer 3

您所拥有的是正确的，应该以4/5的角度工作。您是否正在使用一个非常老的，预发行的angular 2版本？

这是您的代码和下面的代码的堆栈闪电战，都可以正常工作

您也可以这样做，这是首选方式

<li *ngFor="let episode of episodes; let i = index">
    <div [attr.id]="'wave' + i">{{episode.name}}</div>
</li>