角度2+,垫子表-过滤不适用于模型中的模型

时间:2020-08-07 06:56:05

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

我有一个带有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>
  1. 从物料表中过滤不适用于实体单元。
  2. tr的最后一行(如果没有匹配项应显示消息)不起作用。

感谢帮助。

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

1 个答案:

答案 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)?