我有以下对象，我以表格格式“键”和“值”标题显示。
{
"ab": "a val",
"bc": "baa",
"kk": "try",
"dd": "again"
}
我需要在输入字段中输入一些文本后立即进行过滤。
因此，如果我在输入字段中输入 'a' 则它应该返回/显示在下表中，因为它在键中具有与 'a' 匹配的记录或价值 -
{
"ab": "a val",
"bc": "baa",
"dd": "again"
}
我在 html 中使用 ngFor -
*ngFor="let item of obj | keyvalue"
【问题讨论】：
标签： angular typescript object
您可以实现一个自定义管道来过滤结果。请注意，您可能需要在管道指令设置中设置属性“纯”，否则如果在同一页面上将项目添加到表中，则不会重新应用过滤器。另请注意，此选项对性能不利，因此请确保您需要它。
【讨论】：
这里有example 基本上对象不是存储数组的好方法，更好地将其转换为具有如下结构的实际数组：
{ key: string, value: string }[]
这将使您能够使用数组过滤器并与 angular ngFor 平滑集成。
在组件中：
/** Fixed structure or some logic that will transform your data into it like for exampe reducer */
list = [
{ key: 'ab', value: 'a val' },
{ key: 'bc', value: 'baa' },
{ key: 'kk', value: 'try' },
{ key: 'dd', value: 'again' },
]
/** Search phrase that will be used for filtering your data set */
phrase$ = new BehaviorSubject<string>('');
/** Observable for filtering out data to show in table */
items$ = this.phrase$.pipe(
map((phrase = '') => phrase.length > 0
? this.list
.filter(({ value }) => value.indexOf(phrase) >= 0).slice(0)
: this.list
)
)
/** pushing new phrase values */
onChange(e) {
this.phrase$.next(e);
}
在模板中
Enter search phrase: <input (keyup)="onChange($event.target.value)">
<table>
<tr *ngFor="let item of items$ | async"><th>{{ item.key }}</th><td> {{ item.value }}</td></tr>
</table>
如果您需要将数据转换为数组的逻辑：
list = Object.entries(data).reduce((result, [key, value]) => {
result[key] = value;
return result;
}, {})
【讨论】：
您需要在 Javascript 中使用 angularJS 来实现该功能。您需要创建一个应用模块和一个控制器来获取用户的输入，然后查看数组并过滤掉结果。
【讨论】：