angular 2+, mat table - фильтрация не работает для модели в модели

Question

У меня есть mat-table с dataSource, модели которого выглядят так:

.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>

1. Фильтрация из таблицы mat не работает для ячейки материала.
2. Последняя строка tr, в которой должно отображаться сообщение, если совпадения нет, не работает.

Спасибо за help.

Edit .: Angular ver .: 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 core 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)?