在ng

Question

我是Angular 2的新手，我试图为* ngFor中的div提供动态分配的ID。我希望div被称为wave1，wave2，wave3＆＃39;等

<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

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

这是一个带有你的代码和下面代码的stackblitz，两者都在工作

https://stackblitz.com/edit/angular-khur4v?file=app%2Fapp.component.html

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

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

Answer 3

您无需定义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 4

对我来说，如果我添加单引号，它就有效。否则Angular会检测到var。

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