Angular如何打印子组件中经MatTableDataSource筛选后的列表？

当前你打印全量列表的原因是主组件读取的this.child.EnvironmentTransactions是子组件存储的原始全量数据，而Angular Material的MatTableDataSource筛选后的结果会单独存储在filteredData属性中，你没有读取这个属性的内容。

第一步：修改子组件TabWarehouseDetailComponent的TS代码 #

新增一个公开的getter方法，对外暴露筛选后的列表数据，避免直接对外暴露dataSource内部属性，降低组件耦合：

private _environmentTransactions: IEnvironmentTransactionSummary[];
// 原有代码保持不变
@Input()
set EnvironmentTransactions(prm: IEnvironmentTransactionSummary[]) {
    if (prm != this._environmentTransactions) {
        this._environmentTransactions = prm;
        this.dataSource = new MatTableDataSource(prm);
    }
}

get EnvironmentTransactions(): IEnvironmentTransactionSummary[] {
    return this._environmentTransactions;
}

applyFilterEnviroment(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
    if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
    }
}

// 新增以下代码：对外提供筛选后的数据
get filteredEnvironmentTransactions(): IEnvironmentTransactionSummary[] {
  // 兼容dataSource未初始化的情况，避免空指针报错
  return this.dataSource?.filteredData || [];
}

第二步：修改主组件的printList方法 #

把读取全量数据的逻辑替换为读取子组件暴露的筛选后数据：

printList() {
        let source: IEnvironmentTransactionSummary[] = [];
        // 仅修改这一行即可，其余原有代码保持不变
        source = this.child.filteredEnvironmentTransactions;

        // 下方原有逻辑完全不变
        if (
            source && source.length > 0
        ) {
            const dialogRef = this._dialog.open(CommonDailogComponent, {
                width: "400px",
            });
            // ... 其余原有代码省略
        }
        // ... 其余原有代码省略
}

补充说明 #

• MatTableDataSource.filteredData默认返回所有符合筛选条件的全量数据，不受分页器当前页码影响，如果你需要仅打印当前分页页的内容，可以再根据分页器的pageIndex和pageSize对filteredData做截取即可。
• 如果你不想新增getter，也可以直接在主组件读取this.child.dataSource.filteredData，但该方式耦合度更高，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Hectic Platypus