为了实现这一点，我将使用以下步骤 rxjs
- 定义
datasource为Observable
dataSource = [
{
firstname: "James",
lastname: "Amstrong",
othernames: "Angel",
age: 35
},
{
firstname: "John",
lastname: "Peter",
othernames: "Ava",
age: 43
},
...
]
我们将它转换datasource到 Observable 使用of从'rxjs'
- 将过滤器定义为
Observable
tableHeader = [
{
key: "firstname"
},
{
key: "lastname"
},
...
];
filterKeyValues = this.tableHeader.map(({ key }) => ({ key, value: "" }));
filterSubject$ = new BehaviorSubject(this.filterKeyValues)
filter$ = this.filterSubject$.asObservable()
这只是生成一个Observable带有结构的
Observable<[{ key: firtname, value: ''}, { key: lastname, value: ''}, ...]>
- 结合两者并返回新的
Observable作为新的过滤数据
dataSource$ = combineLatest([
this.filter$, of(this.dataSource)
]).pipe(
map(([filter, dataSource]) =>
dataSource.filter(item =>
filter.every((value) =>
(new RegExp(String(value.value).toLowerCase())).test(String(item[value.key]).toLowerCase())
)
)
)
)
- 为定义处理程序
inputChange
public inputChange(event: any, key) {
this.filterKeyValues.find(({key: testKey}) => testKey === key).value = event.target.value
this.filterSubject$.next(this.filterKeyValues)
}
- 使用
async可显示的内容
<table>
<tr>
<td *ngFor="let t of tableHeader">
<input type="text" [id]="t.key" (keyup)="inputChange($event, t.key)">
</td>
</tr>
<tr *ngFor="let item of dataSource$ | async">
<td>{{ item.firstname }}</td>
<td>{{ item.lastname }}</td>
<td>{{ item.othernames }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
我们正在调用下一个值。这将强制进行更改检测，datasorce$ Observable并将对其进行重新评估以导致用户界面中的更新
那正是我想要的，谢谢@Owen Kelvin。