таблица сложных типов с фильтрующим угловым материалом - PullRequest
Новая
       8

таблица сложных типов с фильтрующим угловым материалом

0 голосов
/ 09 октября 2018

Я хотел использовать таблицу с фильтрацией из Angular Material, но я не могу фильтровать сложные типы (Branch.category).Фактический фильтр работает только для subjectName.

TS: 

   export class Subject {
  id: Number = null;
  subjectName: String = '';
  branch: Branch = new Branch;
}

export class Branch {
  category: String = '';
}



displayedColumns: string[] = ['id', 'subjectName', 'category'];
dataSource;
subjects: Subject[];

constructor() {

this.subjects = [];
this.subjects.push({id:1, subjectName: 'Biology', branch: {category: 'science'}});
this.subjects.push({id:2, subjectName: 'physics', branch: {category: 'science'}});
this.subjects.push({id:3, subjectName: 'english', branch: {category: 'humanities'}});

this.dataSource = new MatTableDataSource(this.subjects);
}

applyFilter(filterValue: string) {
  console.log(filterValue);
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

HTML: 

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="search">
</mat-form-field>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="subjectName">
    <th mat-header-cell *matHeaderCellDef> subjectName </th>
    <td mat-cell *matCellDef="let element"> {{element.subjectName}} </td>
  </ng-container>

  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef> category </th>
    <td mat-cell *matCellDef="let element"> {{element.branch.category}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;" 
    [ngClass]="{'highlight': selectedRowIndex == element.id}"
    (click)="highlight(element)"></tr>

</table>

Я хотел бы создать два отдельных фильтра: subjectName и category.

1 Ответ

0 голосов
/ 10 октября 2018

Добро пожаловать в StackOverflow, я думаю, что вы, возможно, захотите сделать пользовательский фильтр для вашей таблицы данных, вы можете сделать это, переопределив свойство filterPredicate источника данных следующим образом: 

this.dataSource.filterPredicate = (data, filter) => {
  const customField = data.branch.category;
  return customField === filter; 
}

Этоэто всего лишь небольшой пример для вас, и вам может потребоваться некоторое исправление для работы.Просто дайте мне знать, как это подходит, и мы можем работать над этим.Вы можете прочитать документы для получения дополнительной информации здесь .

Редактировать: Обнаружено это Github выпуск , и я думаю, что это будет полезно для вас.

...