我正在尝试使用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);
}
}
答案 0 :(得分:0)
第一次是从数组的所有数据集中进行搜索,但是第二次是从第一次搜索中进行搜索。
这就是为什么它第一次起作用但第二次却失败了的原因。
因此,每当要搜索时,请确保表中包含所需的所有数据。
- 或者只是您可以通过这种方式实现。
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);
});
}
我希望这会有所帮助。
但是我建议您在服务中实现一种方法,以便您可以使用关键字搜索数据。