时间戳

首页 > 解决方案 > Angular 5 材料数据表

angular - Angular 5 材料数据表

问题描述

我正在尝试使用 Angular 材料数据表创建搜索功能。我正在使用默认函数来过滤 Angular 文档中的数据表。

我要做的是，最初表格不会显示任何数据，只有在搜索框中输入关键字后，才会显示匹配的结果。

我的问题是我的表格首先给出了正确的结果，但是在第二次尝试搜索时它一直在闪烁。我从一个 json 文件中获取了我的数据。我应该为此使用 Promise 吗？还是因为我不能像这样使用默认的过滤功能来实现这个搜索功能？

HTML：

    <div class="clear overflow-hidden">
      <div class="input-holder">
        <mat-form-field>
          <input matInput id="searchInput" placeholder="">
          <div class="green-box"><img alt="search" (click)="searchTable();" src="../../../assets/images/search-icon.png"></div>
        </mat-form-field>
    </div>
    </div>
    <div class="mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource" matSort matSortActive="accountId" matSortDirection="asc">

        <!-- Id Column -->
        <ng-container matColumnDef="accountId">
          <mat-header-cell *matHeaderCellDef mat-sort-header>AccountId</mat-header-cell>
          <mat-cell *matCellDef="let record">{{record.accountId}}</mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
          <mat-cell *matCellDef="let record">{{record.name}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="records">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell>
          <mat-cell *matCellDef="let record">{{record.records[0].accountNumber}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="price">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Price</mat-header-cell>
          <mat-cell *matCellDef="let record">{{record.price}}</mat-cell>
        </ng-container>

        <!-- -->

        <mat-header-row *matHeaderRowDef="displayedColumns" color="primary"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>

      <!-- <mat-paginator #paginator
        [length]="dataSource.data.length"
        [pageIndex]="0"
        [pageSize]="50"
        [pageSizeOptions]="[25, 50, 100, 250]">
      </mat-paginator> -->
    </div>

零件：

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { RecordsService } from '../../services/records.service';
    import { Observable } from 'Rxjs';
    import { MatSort, MatSortable, MatTableDataSource, MatSelectModule } from '@angular/material';
    import { Company } from '../../models/interfaces/company';

    @Component({
      selector: 'data-table',
      templateUrl: './data-table.component.html',
      styleUrls: ['./data-table.component.scss']
    })
    export class DataTableComponent implements OnInit {
      @ViewChild(MatSort) sort: MatSort;
      records: Array<any>;
      dataSource;

      displayedColumns = ['accountId', 'name', 'records', 'price'];

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

      constructor(private recService: RecordsService) {}
      ngOnInit() {
        this.loadTable();
      }

      loadTable() {
        this.recService.getResults().subscribe( results => {
          this.dataSource = new MatTableDataSource(results);
          this.dataSource.sort = this.sort;
        });
      }

      searchTable() {
        const query = (document.getElementById('searchInput') as HTMLInputElement).value;
          this.applyFilter(query);
      }
    }

标签： angularangular-material

解决方案

第一次从数组的所有数据集中搜索，但第二次从第一次搜索的集合中搜索。

这就是为什么它第一次工作但第二次失败的原因。

因此，每当您要搜索时，请确保您的表格包含您想要的所有数据。

- 或者只是你可以通过这种方式实现它。

searchTable() {
      this.recService.getResults().subscribe( results => {
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      const query = (document.getElementById('searchInput') as HTMLInputElement).value;
      this.applyFilter(query);
    });

  }

我希望这有帮助。

但我建议您在服务中实现一种方法，以便您可以使用关键字搜索数据。

推荐阅读