Как использовать флажки для фильтрации мат-таблицы в угловых 8 - PullRequest
Новая
       15

Как использовать флажки для фильтрации мат-таблицы в угловых 8

0 голосов
/ 26 июня 2019

Я пытаюсь использовать флажки для фильтрации таблицы, которая у меня есть, но все, что я до сих пор пробовал, не сработало.

Это мой пример таблицы: 

 <mat-table [dataSource]="dataSource"  [hidden]="!show" matSort >
    <!-- Location  -->
    <ng-container matColumnDef="AITOR">
      <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
      <mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
    </ng-container>
        <!-- Type  -->
        <ng-container matColumnDef="SOG_MCOLH">
          <mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
          <mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
        </ng-container>

Вот как выглядит мой флажок: 

<input  class="CheckBoxClass" type="checkbox" value="RG" (onclick)="doFilter(RG)" >
<mdb-icon class="IconClass" fas icon="tint"></mdb-icon>
RG<br>

эта функция используется в моем компоненте: 

public doFilter = (value: string) => {
  this.dataSource.filter = value.trim().toLocaleLowerCase();
}

Я пытался использовать [флажок] вместо (onclick) ни один изони работают.Я пытался использовать трубу, но я не совсем понял, и как я должен это написать.Я пытался найти решение в Интернете, но никто не использует фильтр-флажок.

1 Ответ

0 голосов
/ 27 июня 2019

Я нашел решение этой проблемы -

вам нужно сделать пользовательский filterPredicate, чтобы использовать checkbox для фильтрации.

Вот мой фрагмент кода с новыми filterPredicate и HTML:

HTML: 

<div class="CheckBoxStyle">
<mat-checkbox  class="CheckBoxClass" value="RG" (change)="addFilter($event)">RG</mat-checkbox>
<mdb-icon class="IconClass" fas icon="tint"></mdb-icon>
</div>

Компонент - filterPredicate и method, который observes это и использует это: 

ngOnInit() {
  this.marinService.getAllContainers().subscribe((result)=>{
    this.dataSource = new MatTableDataSource(result);
    this.total = this.dataSource.length;

    this.dataSource.filterPredicate = (data: Container, filter: any) => {
      return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
    };
    this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
      this.dataSource.filter = newFilterValue.join(',');
        });
    )}        
  }

addFilter(change: MatCheckboxChange) {
  if (this.filterCheckboxes.value.some((a: any) => a === change.source.value)) {
    this.filterCheckboxes.next(this.filterCheckboxes.value.filter((a: any) => a !== change.source.value));
  } else {
    this.filterCheckboxes.next(this.filterCheckboxes.value.concat(change.source.value));
  }
}

Это решение для использования флажка в фильтрации datatable, который работал для меня.

...