在Angular中,可以使用动态搜索框来过滤表格列。下面是一个示例解决方案:
Name
Age
City
{{ person.name }}
{{ person.age }}
{{ person.city }}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
people = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Jane', age: 30, city: 'Los Angeles' },
{ name: 'Bob', age: 35, city: 'Chicago' }
];
searchText: string = '';
get filteredPeople() {
return this.people.filter(person =>
person.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
person.age.toString().includes(this.searchText) ||
person.city.toLowerCase().includes(this.searchText.toLowerCase())
);
}
}
在上述代码中,我们定义了一个people
数组来存储人员数据。我们还定义了一个searchText
变量,它将与人员数据进行匹配。通过计算属性filteredPeople
,我们使用filter
方法对人员数据进行过滤,只返回与搜索文本匹配的人员。
请注意,我们使用了toLowerCase
方法将搜索文本和人员数据都转换为小写,这样我们就可以进行不区分大小写的匹配。此外,我们还使用toString
方法将年龄转换为字符串,以便进行匹配。
这样,当在输入框中输入文本时,表格将根据输入的文本动态过滤显示结果。