angular 2+, mat table - 过滤不适用于模型中的模型

Question

我有 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>

从垫子 table 中过滤不适用于 material 单元格。
tr 的最后一行，如果没有匹配则应该显示消息，但不起作用。

感谢您的帮助。

编辑： Angular版本：8.0 示例：https://stackblitz.com/edit/angular-cxmmdz?file=src/app/table-filtering-example.ts - 过滤不适用于 {{row.color.name}}

Answer 1

好的，我找到了简单的解决方案。

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}}（用于 ex.AutoMapper）？

angular 2+, mat table - 过滤不适用于模型中的模型

angular 2+, mat table - filtering not working for model in model

filtering

filter

angular-material

angular

mat-table