在Angular中,可以使用管道(pipe)来解决渲染过滤数组的问题。下面是一个示例解决方案:
export class MyComponent {
data = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Mike', age: 35 }
];
}
-
{{ item.name }} - {{ item.age }}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], filter: string): any[] {
if (!items || !filter) {
return items;
}
return items.filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
}
}
import { FilterPipe } from './filter.pipe';
@NgModule({
declarations: [
MyComponent,
FilterPipe
],
...
})
export class MyModule { }
现在,当你在输入框中输入文本时,数组将根据输入的内容进行过滤,并只渲染符合条件的项。
希望这个示例可以帮助你解决渲染过滤数组的问题!