如何解决角度材料表过滤复杂对象数组数组
我尝试通过使用 filterPredicate
覆盖表的默认过滤器来过滤嵌套网格,但它不起作用。
我尝试过的:
界面:
export interface ProductType {
productTypeId: number;
productTypeName: string;
products: Product[];
}
export interface Product {
productId: number;
productName: string;
}
.ts :
ngOnInit() {
this.ProductTypeDataSource = new MatTableDataSource(data);
this.ProductTypeDataSource.filterPredicate = (data,filter) => {
let valid = false;
const transformedFilter = filter.trim().toLowerCase();
Object.keys(data).map(key => {
if (key === 'products' && data.products.filter(x => x.productName.toLowerCase() == transformedFilter)?.length > 0) {
valid = true;
}
});
return valid;
};
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase()
this.ProductTypeDataSource.filter = filterValue;
}
.htm
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="productTypeDataSource" multiTemplateDaTarows class="mat-elevation-z8">
<ng-container matColumnDef="productTypeName">
<th mat-header-cell *matHeaderCellDef>
Product type </th>
<td mat-cell *matCellDef="let element">
{{element.productTypeName}} </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="productTypedisplayedColumns.length"
style="padding: 0px;">
<div class="example-element-detail"
[@detailExpand]="getStatusExpandDetail(element.productTypeId)?'expanded':'collapsed'">
<div class="inner-table mat-elevation-z8">
<!-- Product inner Table -->
<table #innerTables mat-table [dataSource]="element.products" class="product-table">
<ng-container matColumnDef="productName">
<td mat-cell *matCellDef="let element"> {{element['productName']}} </td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: productTypedisplayedColumns;"></tr>
</table>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="productTypedisplayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: productTypedisplayedColumns;" class="example-element-row"
(click)="onClickRow(element.productTypeId)">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
如何过滤嵌套的网格/产品?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。