我正在尝试在 Angular 应用程序中的对象数组内的嵌套数组上过滤 a 。这是组件代码片段 -
var teams = [
{ name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name: 'm3' }] },
{ name: 'Team2', members: [{ name: 'm4' }, { name: 'm5' }, { name: 'm6' }] },
{ name: 'Team3', members: [{ name: 'm7' }, { name: 'm8' }, { name: 'm9' }] }
];
我想要实现的是,如果我搜索 m5
例如,我的结果应该是 -
var teams = [
{ name: 'Team1', members: [] },
{ name: 'Team2', members: [{ name: 'm5' }] },
{ name: 'Team3', members: [] }
];
所以我有 teams
和 filteredTeams
属性,并且在我正在执行的搜索功能中 -
onSearchChange(event: any): void {
let value = event.target.value;
this.filteredTeams = this.teams.map(t => {
t.members = t.members.filter(d => d.name.toLowerCase().includes(value));
return t;
})
}
现在这在某种程度上确实有效,但是因为我正在替换成员,所以它会在每次调用时破坏数组(如果这有意义的话)。我理解为什么会发生这种情况,但我的问题是实现此过滤器的最佳方法是什么?
最佳答案
你已经非常接近了,你唯一做错的就是改变teams
中的源对象
基本上你可以使用spread operator生成一个新条目,然后返回一个包含新值的全新数组。
const teams = [
{ name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name: 'm3' }] },
{ name: 'Team2', members: [{ name: 'm4' }, { name: 'm5' }, { name: 'm6' }] },
{ name: 'Team3', members: [{ name: 'm7' }, { name: 'm8' }, { name: 'm9' }] }
];
const value = 'm5';
const result = teams.map(t => {
const members = t.members.filter(d => d.name.toLowerCase().includes(value));
return { ...t, members };
})
console.log(result)
关于Javascript 过滤嵌套数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54555942/