Поиск в столбцах отдельно (Angular 7) - PullRequest
Новая
       42

Поиск в столбцах отдельно (Angular 7)

0 голосов
/ 07 марта 2019

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

// Component
export class AppComponent implements OnInit {
  private dataSource;
  requestData: ITest[];

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.getRepos();
  }

  getRepos() {
    this.reportService.getAll()
      .subscribe(response => {
        this.requestData = response['tables'][0]['data'];
        this.dataSource = new MatTableDataSource(this.requestData);
        this.dataSource.sort = this.sort;
      });
  }

  tableFilter(eventValue: string) {
    this.dataSource.filter = eventValue.trim().toLowerCase();
  }
...
}

//HTML:

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

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z2">
  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      ID
      <!-- <mat-form-field>
        <input matInput placeholder="ID" formControlName="id">
      </mat-form-field> -->
    </th>

    <td mat-cell *matCellDef="let el">{{el.ID}}</td>
  </ng-container>
  ...
</table>

Как я могу использовать FormBuilder и formControlName для фильтрации каждого столбца отдельно?Я нашел пример с модулем FormControl

1 Ответ

0 голосов
/ 07 марта 2019

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

Далее, вы должны использовать элемент управления формы для управления этим. 

filter = new FormControl('');

ngOnInit() {
  this.filter.valueChanges.subscribe(value => {
    this.dataSource = new MatTableDataSource(
      this.requestData
        .filter(report => report.yourField.includes(value) 
          || report.yourSecondField.includes(value)
        )
    );
  });
}
...