在Angular 2+中,ngFor指令用于迭代数组或可迭代对象的元素,并为每个元素生成相应的HTML元素。如果要迭代可迭代对象的引用,可以使用键值对的形式来迭代。
以下是一个示例,演示如何使用ngFor指令迭代可迭代对象的引用:
在组件中定义一个可迭代对象的引用:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
-
Key: {{ i }}, Value: {{ item }}
`,
})
export class AppComponent {
ref = new Map([
[1, 'Item 1'],
[2, 'Item 2'],
[3, 'Item 3']
]);
}
在模板中使用ngFor指令来迭代可迭代对象的引用。使用let item of ref
来获取每个键值对的值,使用let i = index
来获取每个键值对的键。
在上面的示例中,我们使用了Map
来定义可迭代对象的引用。你也可以使用其他可迭代对象,如数组或自定义的可迭代对象。
通过这种方式,你可以在Angular 2+中使用ngFor指令迭代可迭代对象的引用。