在 ngFor 中动态分配元素 id

Question

我正在尝试为 *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.

Answer 1

你不需要定义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 2

对我来说，如果我添加单引号就可以了。否则 Angular 检测到 var.

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

Answer 3

您所拥有的是正确的，应该可以在 angular 4/5 内使用。您可能使用的是非常旧的 pre-release angular 2 版本吗？

这是一个堆栈闪电战，你的代码和下面的代码都有效

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

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

Answer 4

您可以使用 {{ 'wave' + i }} 而不是 wave{{i}}。使其成为 Angular Expersion。这是完整的 ngFor:

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

它可以正常工作并使用正确的 id

创建 div

document.getElementById("wave1")

输出将是这样的：

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

但请记住，您的代码将从 wave0 开始，因为 i = index 从 0 开始。

Dynamically assign element id inside ngFor