在Angular 2中实现数组搜索过滤可以通过以下步骤完成:
<input type="text" [(ngModel)]="searchKeyword" placeholder="Search">
export class MyComponent {
searchKeyword: string;
data: any[] = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
filteredData: any[];
constructor() {
this.filteredData = this.data;
}
}
export class MyComponent {
// ...
filterData() {
this.filteredData = this.data.filter(item =>
item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
);
}
}
<ul>
<li *ngFor="let item of filteredData">
{{ item.name }} - {{ item.age }}
</li>
</ul>
<input type="text" [(ngModel)]="searchKeyword" (input)="filterData()" placeholder="Search">
这样,当用户在输入框中输入关键字时,数组会根据关键字进行过滤,并在页面上显示过滤后的结果。
关于Angular 2的更多信息和相关产品,你可以参考腾讯云的官方文档和产品介绍页面:
领取专属 10元无门槛券
手把手带您无忧上云