在 ngFor 中动态分配元素 id答案

【问题标题】：Dynamically assign element id inside ngFor在 ngFor 中动态分配元素 id
【发布时间】：2018-09-10 09:32:24
【问题描述】：

我正在尝试为 *ngFor 中的 div 动态分配 id。我希望将 div 称为“wave1、wave2、wave3”等。

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

但是，这会引发以下错误：

错误 DOMException：无法在“文档”上执行“querySelector”： '#wave[object Object]' 不是有效的选择器。

【问题讨论】：

【解决方案1】：

您可以使用{{ 'wave' + i }} 代替wave{{i}}。将其设为 Angular Experession。这是完整的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 开始。

【讨论】：

这对于分配 id 非常有用，但是你如何在你的 html 中动态地引用 Id 呢？我正在尝试对具有动态分配 ID 的字段进行验证。我需要能够说出像 *ngIf="'controlName' + index.invalid" 这样的话。

【解决方案2】：

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

这是一个堆栈闪电战，您的代码和下面的代码都在工作

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

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

【讨论】：