Question

我正在尝试使用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);
      }
    }

Answer 1

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

这就是为什么它第一次起作用但第二次却失败了的原因。

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

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

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);
    });

  }

我希望这会有所帮助。

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

Angular 5材料数据表

1 个答案: