Angular 2是一种流行的前端开发框架,用于构建现代化的Web应用程序。在Angular 2中,要在使用搜索框时更新组件中的表,可以按照以下步骤进行操作:
<input type="text" [(ngModel)]="searchText">
export class MyComponent implements OnInit {
searchText: string = '';
ngOnInit() {
// 初始化搜索框的默认值
this.searchText = '默认搜索词';
}
}
export class MyComponent {
tableData: any[] = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
filteredData: any[] = [];
filterTableData() {
this.filteredData = this.tableData.filter(item => {
return item.name.toLowerCase().includes(this.searchText.toLowerCase());
});
}
}
<table>
<tr *ngFor="let item of filteredData">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
<input type="text" [(ngModel)]="searchText" (input)="filterTableData()">
通过以上步骤,当用户在搜索框中输入内容时,组件中的表将会根据搜索框的值进行过滤,并实时更新显示过滤后的数据。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云