我有一个带有dataSource的mat-table,其模型如下:
.ts
interface DataModel {
id: number;
projectName: string;
material: material;
}
interface material {
materialID: number;
materialName: string;
}
.html
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="projectName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> projectName</th>
<td mat-cell *matCellDef="let row"> {{row.projectName}} </td>
</ng-container>
<ng-container matColumnDef="material">
<th mat-header-cell *matHeaderCellDef mat-sort-header> material </th>
<td mat-cell *matCellDef="let row"> {{row.material ? row.material.materialName : '' }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
感谢帮助。
编辑。: 角度版本:8.0 示例:https://stackblitz.com/edit/angular-cxmmdz?file=src/app/table-filtering-example.ts-过滤不适用于{{row.color.name}}
答案 0 :(得分:0)
好吧,我找到了解决方法。
export interface UserData {
id: number;
name: string;
color: string;
}
export interface ColorName {
id: number;
name: string;
}
const ELEMENT_DATA_COLOR: ColorName[] = [
{id: 1, name: 'red'},
{id: 2, name: 'orange'}
];
const ELEMENT_DATA: UserData[] = [
{id: 1, name: 'one',color:ELEMENT_DATA_COLOR[0].name },
{id: 2, name: 'two',color: ELEMENT_DATA_COLOR[1].name}
];
但是我有一个问题。我从.net核心API获取数据。看起来像:
const ELEMENT_DATA: UserData[] = [
{id: 1, name: 'one',color:ELEMENT_DATA_COLOR[0] },
{id: 2, name: 'two',color: ELEMENT_DATA_COLOR[1]}
];
因此,如果我想过滤有效,我需要将数据保存到另一个颜色不是字符串对象颜色的模型中,因为过滤不适用于{{row.color.name}}(用于AutoMapper)?