Применить фильтр к источнику данных, чтобы отправить конкретные данные в таблицу - PullRequest
Новая
       66

Применить фильтр к источнику данных, чтобы отправить конкретные данные в таблицу

0 голосов
/ 15 мая 2019

Я пытался добавить условный фильтр к источнику данных перед его загрузкой в ​​таблицу mat, таким образом, только те данные в определенном статусе "open" могут быть показаны в этой таблице.Но я понятия не имею, как я могу это сделать.

Я пробовал решение из Исключить или включить конкретную строку из представления таблицы матов , но оно возвращает ошибку TS2349.Также я попробовал ng-if, как всегда делал в других таблицах, но он только скрывает значения и оставляет много пустых строк.Ниже приведен код с ошибкой.

ngAfterViewInit() {
    this.afs.collection<any>('Projects').valueChanges().subscribe(data => {
// TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.
      this.dataSource = new MatTableDataSource(data).filter(data => data.status === 'open');
// error ends
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    })
  }

И это html-часть: 

    <mat-table #table [dataSource]="dataSource" matSort [trackBy]="trackByUid" class="animate" (change)="onChange($event.target.value)">

      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> ID </mat-header-cell>
          <mat-cell *matCellDef="let hacker">
                {{ hacker.id }}
          </mat-cell>
      </ng-container>


      <ng-container matColumnDef="publishedDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Published Date </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.publishedDate }}
        </mat-cell>
      </ng-container>


      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Name </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.name }}
        </mat-cell>
      </ng-container>


      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Type </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.type }}
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="dueDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold; color:#fff"> Due Date </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.dueDate }}
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="edit">
          <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Edit </mat-header-cell>
          <mat-cell *matCellDef="let hacker">
                  <button mat-raised-button  color="primary" (click)="openDialog(hacker)">Edit</button>
          </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" class="animate"></mat-row>
    </mat-table>
      <mat-paginator [length]="100"
                     [pageSize]="10"
                     [pageSizeOptions]="[5, 10, 25, 100]">
      </mat-paginator>

Я ожидаю, что смогу предотвратить эти данные с помощью «data.status! ==« open »», отображаемым на моемТаблица.(Теперь он показывает все, прежде чем любая идея, как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

Если вы хотите легко фильтровать данные, Pipe - хороший класс для применения фильтра к данным в формате html: 

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.toLowerCase().includes(searchText);
    });
   }
}

Затем используйте его для массива в html, внутри для: 

<ul>
  <li *ngFor="let c of characters | filter : searchText">
    {{c}}
  </li>
</ul>

для получения дополнительной информации об этом: Создание канала поиска для динамической фильтрации результатов

0 голосов
/ 15 мая 2019

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

ngAfterViewInit() {
  this.afs.collection<any>('Projects').valueChanges().subscribe(data => {
    const filteredData = data.filter(d => d.status === 'open');   
    this.dataSource = new MatTableDataSource(filteredData);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  });
}

Я сделал маленький stackblitz здесь, чтобы показать вам, как вы можете легко фильтровать данные перед отображением это в таблице.

...