如何在表格中动态显示过滤结果？答案

【问题标题】：How to show filtered result dynamically in table?如何在表格中动态显示过滤结果？
【发布时间】：2021-01-13 19:59:06
【问题描述】：

我使用 3 个输入来过滤我的数据，其中包含一个带有 searchvaluechanges 和 observable 的 http 请求。我的问题是用我得到的数据过滤表格。加载仪表板时，该表将填充一个 http GET。目前我不确定 mat-table 是否是最好的方法。我看不出有什么办法让它发挥作用。

Dashboard.component.html

<div class="row align-items-end">
 <div class="col">
  <input (change)="searchValueChange()" [(ngModel)]="filter.articleNumber" id="search-box" matInput
             placeholder="Articlenumber...">
  <input (change)="searchValueChange()" [(ngModel)]="filter.name" matInput placeholder="Name...">
  <input (change)="searchValueChange()" [(ngModel)]="filter.description" matInput placeholder="Description...">
 </div>
</div>
<div class="row">
 <div class="col">
  <mat-table [dataSource]="articles" class="mat-elevation-z8">
   <!-- ArticleNumber Column -->
    <ng-container matColumnDef="articleNumber">
      <mat-header-cell *matHeaderCellDef> Articlenumber</mat-header-cell>
      <mat-cell *matCellDef="let article"> {{article.articleNumber}} </mat-cell>
     </ng-container>
   </mat-table>
 </div>
</div>

Dashboard.component.ts

export class DashboardComponent implements OnInit {
  public search$: Observable<ArticleSmall[]>;
  public filter: ArticleFilter = {
    articleNumber: '',
    name: '',
    description: ''
  };
  public articles: ArticleSmall[] = [];
  public searchTerms: Subject<any> = new Subject<any>();
  public dataSource = new MatTableDataSource(this.articles);
  public displayedColumns: string[] = ['articleNumber', 'name', 'description', 'actions'];

  constructor(private articleService: ArticleService) {
  }

  public ngOnInit(): void {
    this.getArticles();

    this.search$ = this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(() => this.articleService.search(this.filter.articleNumber, this.filter.name, this.filter.description)));
  }

  public searchValueChange(): void {
    this.searchTerms.next(JSON.stringify(this.filter));
  }
  //this loads all articles with reduced information in the Dashboards Mat-Table
  public getArticles(): void {
    this.articleService.getAllArticles()
      .pipe(
        map((articles: Article[]) => articles.map((article: Article) => {
            const newArticle: ArticleSmall = {
              name: article.name,
              articleNumber: article.articleNumber,
              description: article.description
            };

            return newArticle;
          }
        ))
      ).subscribe((data: ArticleSmall[]) => this.articles = data);
  }
}

【问题讨论】：

标签： javascript html angular filter angular-material

【解决方案1】：

嗯，你需要做一些改变：

将您的数据表绑定到MatTableDataSource

 <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
   <!-- ArticleNumber Column -->
    <ng-container matColumnDef="articleNumber">
      <mat-header-cell *matHeaderCellDef> Articlenumber</mat-header-cell>
      <mat-cell *matCellDef="let article"> {{article.articleNumber}} </mat-cell>
     </ng-container>
   </mat-table>

订阅$search以更新MatTableDataSource的数据。

 public ngOnInit(): void {
    // previous code
   this.$search.subscribe(data=>{ // I assumed that your service returns the data not response itself.
    this.dataSource.data = data;
   });
  }

编辑 3. 你还需要改变你的初始数据加载如下：

public getArticles(): void {
    this.articleService.getAllArticles()
      .pipe(
        map((articles: Article[]) => articles.map((article: Article) => {
            const newArticle: ArticleSmall = {
              name: article.name,
              articleNumber: article.articleNumber,
              description: article.description
            };

            return newArticle;
          }
        ))
      ).subscribe((data: ArticleSmall[]) => this.dataSource.data = data);
  }

【讨论】：

如果我将它绑定到MatTableDataSource 我的表中将没有任何数据，因为它不包含请求的数据。我在任何输入字段中搜索后，数据显示，这是正确的。

【解决方案2】：

在订阅方法中获取数据时使用this.changeDetectorRefs.detectChanges() 函数。

你需要在构造函数中注入ChangeDetectorRefs。

您可以找到更多信息here

【讨论】：