angular 2+, 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, которая должна отображать сообщение, если совпадения нет, не работает.

Спасибо за помощь.

Изменить .: Angular ver .: 8.0 Пример: https://stackblitz.com/edit/angular-cxmmdz?file=src/app/table-filtering-example.ts - фильтрация не работает для {{row.color.name}}


angular filter angular-material filtering mat-table
person Xia    schedule 07.08.2020    source источник
comment
Какую версию angular вы используете? * MatNoDataRow был добавлен в angular v10, поэтому он может быть недоступен в вашем проекте. Что касается фильтрации - трудно сказать, не видя вашего кода, отвечающего за фильтрацию :) Хорошая практика - воспроизвести вашу проблему в stackblitz и связать ее с вопросом - это гарантирует, что больше людей найдут время, чтобы взглянуть на вопрос, поскольку он занимает у них меньше времени.   -  person TotallyNewb    schedule 07.08.2020
comment
Не могли бы вы создать пример StackBlitz.   -  person Amit Vishwakarma    schedule 07.08.2020
comment
Если вы хотите отфильтровать сложную модель данных, вы можете создать собственный filterPredicate метод и написать свою логику для фильтрации данных. Отметьте эту [ссылку] (stackoverflow.com/questions/51515695/)   -  person Amit Vishwakarma    schedule 07.08.2020
comment
@TotallyNewb Angular 8.0, но фильтрация отлично работает для идентификатора и имени проекта: /   -  person Xia    schedule 07.08.2020
comment
Надеюсь, это поможет: therichpost.com/   -  person Ajay Malhotra    schedule 07.08.2020
comment
@AmitVishwakarma stackblitz.com/edit/angular- cxmmdz? file = src / app / фильтрация цветов не работает, потому что у меня вместо этого используется {{color.name}} {{color}}   -  person Xia    schedule 07.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я нашел простое решение.

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}
];

Но у меня есть один вопрос. Я получаю данные из API ядра .NET. и это выглядит так:

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

person Xia    schedule 07.08.2020