在 ngFor 中动态分配元素 id

Posted 2023-02-22

【中文标题】在 ngFor 中动态分配元素 id

【英文标题】：Dynamically assign element id inside ngFor

【发布时间】：2018-09-10 09:32:24

【问题描述】：

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

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

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

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

【问题讨论】：

你能在你使用'#wave...的地方添加代码吗？似乎很明显你用字符串连接对象

您使用的是哪个版本的 Angular？

***.com/q/34568497, ***.com/q/36051195

angular 2 是版本

【参考方案1】：

您可以使用 'wave' + i 代替wavei。将其设为 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 版本？

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

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>

【参考方案3】：

你不需要定义i

<li *ngFor="let episode of episodes">
    <div id="waveepisode">episode</div>
</li>

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

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

【讨论】：

如果episodes 是一个对象列表，那将不起作用，它可能在 OP 的示例中

没错，让我修改示例

【参考方案4】：

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

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