在Angular 7中,你可以使用filter
方法来搜索对象数组,并根据严格值来找到匹配的对象。下面是一个示例解决方法:
首先,创建一个包含对象的数组。每个对象都有一个name
和age
属性。
const data = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 25 },
];
然后,创建一个搜索函数,该函数接受一个搜索关键字作为参数,并返回一个匹配的对象数组。
search(keyword: string): any[] {
return data.filter(obj => obj.name === keyword || obj.age === parseInt(keyword));
}
在这个例子中,我们使用filter
方法来遍历数组,并使用严格相等运算符(===
)来比较name
属性和age
属性的值与搜索关键字是否匹配。如果找到匹配的对象,它将被包含在返回的数组中。
最后,你可以在组件中调用search
函数来执行搜索操作。
searchResult: any[];
performSearch(keyword: string): void {
this.searchResult = this.search(keyword);
}
在这个示例中,我们将搜索结果存储在searchResult
数组中,以便在模板中使用。
以下是一个完整的示例组件代码:
import { Component } from '@angular/core';
const data = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 25 },
];
@Component({
selector: 'app-search',
template: `
0">
- {{ result.name }} ({{ result.age }})
No results found.
`,
})
export class SearchComponent {
keyword: string;
searchResult: any[];
search(keyword: string): any[] {
return data.filter(obj => obj.name === keyword || obj.age === parseInt(keyword));
}
performSearch(keyword: string): void {
this.searchResult = this.search(keyword);
}
}
在模板中,我们使用ngModel
指令将输入字段与keyword
属性绑定在一起。当用户点击搜索按钮时,performSearch
方法将被调用,并将关键字作为参数传递给search
方法。然后,模板使用*ngIf
指令来根据搜索结果的长度来显示或隐藏结果列表或未找到结果的消息。
这是一个基本的示例,你可以根据自己的需求进行调整和扩展。