Angular：从ngFor循环中获取选定索引的数据。_编程开发

Angular：从ngFor循环中获取选定索引的数据。

创始人

2024-11-01 20:02:10

0次

在Angular中，要从ngFor循环中获取选定索引的数据，可以使用ngFor指令提供的index变量。以下是一个示例解决方案：

在组件的HTML模板中，使用ngFor指令循环遍历数据，并使用index变量获取当前索引值：


  
    {{ item }}

在组件的typescript文件中，定义一个selectedIndex变量来保存选定的索引值，并创建一个selectItem方法来更新选定的索引：

export class YourComponent {
  selectedIndex: number;

  items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  selectItem(index: number) {
    this.selectedIndex = index;
  }
}

在上述代码中，当点击某个选项时，selectItem方法将会更新selectedIndex变量的值，然后根据index === selectedIndex的比较结果，添加或移除selected类。这样可以在CSS中定义一个selected类来标识选中的元素。

这个示例中，我们使用了一个简单的字符串数组，你可以根据自己的需求替换为你的数据源。

上一篇：Angular：从另一个组件传递的数据在页面重新加载时变为未定义。

下一篇：Angular：从Observable订阅进行相对导航

Angular：从ngFor循环中获取选定索引的数据。

相关内容

热门资讯