角度 2+，垫表 - 过滤不适用于模型中的模型答案

【问题标题】：angular 2+, mat table - filtering not working for model in model角度 2+，垫表 - 过滤不适用于模型中的模型
【发布时间】：2020-11-27 11:46:18
【问题描述】：

我有一个带有 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>

从垫子表中过滤不适用于材料单元格。
tr 的最后一行（如果没有匹配项，应该显示消息）不起作用。

感谢您的帮助。

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

【问题讨论】：

您使用的是哪个版本的 Angular？ *matNoDataRow 是在 angular v10 中添加的，因此它可能在您的项目中不可用。关于过滤 - 很难说没有看到您负责过滤的代码 :) 在 stackblitz 上重现您的问题并将其链接到问题中是一个好习惯 - 它可以确保更多的人会花时间来查看问题，因为它花费他们更少的时间。
您能否创建一个 StackBlitz 示例。
如果你想过滤一些复杂的数据模型，你可以创建自定义的filterPredicate方法并编写你的逻辑来过滤数据。检查此 [链接] (stackoverflow.com/questions/51515695/…)
@TotallyNewb Angular 8.0，但过滤对 id 和项目名称效果很好：/
希望对您有所帮助：therichpost.com/…

标签： angular filter angular-material filtering mat-table

【解决方案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}}（例如使用 AutoMapper）？

【讨论】：