我有一个组件,我在其中显示来自角度材料表的表格,我想要搜索栏我有一个来自官方文档角度材料表的方法 appyFilter,我的搜索栏位于另一个组件上,并且这就是问题。 我没有看到我的错误。
感谢您的帮助。
main.component.ts
data:any;
makeRowObservable() {
return this.service.get().pipe( map(data: myInterface[]) => data.toto.map((item: any[]) => this.transormListToMap())
}
transormListToMap() {
let result = {};
for (let i = 0; i < this.tableCols.length; i++) {
let col = this.tableCols[i];
let value = item[i];
let colId = col.key;
result[colId] = value; // here i got my result
}
this.data = result;
return result;
}
main.component.html
<app-tableau></app-tableau>
<app-filter [valuesData]="data"></app-filter> // this component displays my search bar
filter.component.html
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</mat-form-field>
filter.component.ts
@input valuesData;
public dataSource = MatTableDataSource<any[]>()
ngOnInit() {
this.dataSource = new MatTableDataSource<any[]>()
this.datasource = this.valuesData
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}