Угловой 5 материал данных

Question

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

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

Моя проблема в том, что моя таблица сначала дает правильные результаты, но при второй попытке поиска она продолжает мигать. Я взял мои данные из файла JSON. Должен ли я использовать обещание для этого? Или потому, что я не могу использовать функцию фильтра по умолчанию, подобную этой, для достижения этой функции поиска?

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

  }

---

Надеюсь, это поможет.

Но я рекомендую вам внедрить метод в вашем сервисе, чтобы вы могли искать данные по ключевому слову.