在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
类来标识选中的元素。
这个示例中,我们使用了一个简单的字符串数组,你可以根据自己的需求替换为你的数据源。