Angular material table applyFilter 方法

Question

我有一个组件，我在其中显示来自 angular material table 的 table，我想要搜索栏，我有一个来自官方的方法 appyFilter doc angular material table，我的搜索栏在另一个组件上，这就是问题所在。我没有看到我的错误。

感谢您的帮助。

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();
  }

Answer 1

过滤器组件中应该有一个输入发射器，从 main.component.ts 接收数据，还应该有一个输出发射器，将数据从过滤器组件发射到主要成分。主要组件应该是首先实现数据源的地方。应将相同的数据源作为输入传递给子组件。

结构应该是这样的：

主要组件：（数据获取、构建等 - 父组件）

app-tableau（mat-table - 从 main-comp 获取数据）该组件将只显示 table 和数据
filterComp（小部件 - 从 main-comp 获取数据）该组件将过滤并发送回主组件

main.component.ts

data: any;
dataSource = new MatTableDataSource<any>();
transormListToMap() {
  ..
  ..
  this.data = result;
  this.dataSource.data = result; // Update dataSource
  return result;
}

updateDataSource(filteredData: any){
  this.dataSource.filteredData = filteredData; // Update dataSource with filtered data from filter component
}

main.component.html

<app-tableau [dataSource]="dataSource"></app-tableau>
<app-filter [dataSource]="dataSource" (filteredData)="updateDataSource($event)"></app-filter>

filter.component.html

<input type="text" [(ngModel)]="search" (ngModelChange)="searchData()">

filter.component.ts

@Input() dataSource: any;  // Ideally this also should have type as MatTableDataSource
@Output() filteredData = new EventEmitter();
search: string = '';
ngOnChanges(): void {
  this.searchData();
}

searchData(): void {
  this.dataSource.filter = this.search;
  this.filteredData.emit(this.dataSource.filteredData);
}

Angular material table applyFilter 方法

Angular material table applyFilter method

typescript

angular-material

angular