已解决:带有索引的 html ngfor

与索引一起使用 ngFor 指令的主要问题是,当迭代的数据发生变化时,它可能会导致意外结果。 这是因为在数组中添加或删除项时索引不会自动更新,因此如果在索引 0 处添加新项,则所有其他项的索引都会向下移动一位。 这可能导致在您的视图中显示不正确的数据或在您的应用程序中出现意外行为。

<ul>
  <li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>

1. 这行代码创建了一个无序列表。
2. *ngFor 指令用于循环遍历items 数组并显示列表中的每个项目。
3. let 关键字用于声明一个名为“item”的变量,该变量保存循环迭代中的当前项。
4. let 关键字还用于声明一个名为“i”的变量,该变量保存循环迭代中当前项的索引。
5. 此行显示列表中的每个项目及其索引号(从 0 开始)。

什么是角

Angular 是一个基于 JavaScript 的开源前端 Web 应用程序框架,主要由 Google 以及个人和公司社区维护,以解决开发单页应用程序时遇到的许多挑战。 JavaScript 组件补充了 Apache Cordova,这是一个用于开发跨平台移动应用程序的框架。 它旨在通过为客户端模型-视图-控制器 (MVC) 和模型-视图-视图模型 (MVVM) 架构提供框架以及富 Internet 应用程序中常用的组件来简化此类应用程序的开发和测试。

ngFor元素

NgFor 是一个 Angular 结构指令,它允许我们循环遍历数据并为数组或对象中的每个项目创建一个模板。 它用于将给定的 HTML 元素重复指定的次数。 NgFor 可用于显示数组、对象或字符串中的数据。 它还可用于根据数组或对象的值生成 HTML 元素。 NgFor 通常与其他 Angular 指令结合使用,例如 ngIf 和 ngSwitch。

如何获取 ngFor 元素的索引

您可以使用 index 关键字获取 ngFor 循环中元素的索引。 其语法如下:

{{i}} – {{item}}

在此示例中,“i”变量将包含循环的当前索引。 然后您可以使用此变量访问或修改列表中的元素。

相关文章:

发表评论