在Angular中,你可以使用*ngFor
指令来循环遍历一个数组,并将数据绑定到模板中。下面是一个示例,演示如何使用*ngFor
来匹配数据。
假设我们有一个包含用户对象的数组,每个用户对象具有name
和age
属性。我们想要在模板中显示所有年龄大于18岁的用户。以下是一种解决方法:
在组件中定义一个用户数组:
import { Component } from '@angular/core';
@Component({
selector: 'app-user-list',
template: `
用户列表
-
{{ user.name }} - {{ user.age }}
`,
styles: []
})
export class UserListComponent {
users = [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 },
{ name: '王五', age: 18 },
{ name: '赵六', age: 22 }
];
}
在模板中使用*ngFor
指令来循环遍历users
数组,并使用user.name
和user.age
来显示用户的名称和年龄。请注意,我们在li
元素上使用了*ngFor
指令,这表示该元素将被循环渲染。
为了只显示年龄大于18岁的用户,我们可以在ngFor
上使用条件语句。以下是修改后的代码:
@Component({
selector: 'app-user-list',
template: `
用户列表
-
18">
{{ user.name }} - {{ user.age }}
`,
styles: []
})
export class UserListComponent {
// 用户数组
}
在li
元素内部使用了ng-container
元素和*ngIf
条件语句。这样,只有当user.age > 18
时,才会显示用户的名称和年龄。
这是一个简单的示例,展示了如何使用*ngFor
指令和条件语句来匹配数据。你可以根据自己的需求进行修改和扩展。