仅当我查找 3 个字符时才显示 table

Question

我使用 angular、angular-material 和 firebase。

我可以使用下面的代码正确显示我的数据、过滤、排序和分页。

不利的是，只有当我已经在搜索栏中输入了 3 个字符时，我才会显示我的数据。

你能帮助我或给我曲目吗？谢谢！

export class AnnuairePSComponent implements OnInit {

Data = {
titre:'',
prenom: '',
nom:'',
prof: '',
sv: '',
site:''
}

displayedColumns = [
'titre',
'prenom',
'nom',
'prof',
'sv',
'site'
 ];

 dataSource = new MatTableDataSource();

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

ngAfterViewInit() {
this.psService.getpss().subscribe(res => {this.dataSource.data = res;}); 
}

private paginator: MatPaginator;
private sort: MatSort;

@ViewChild(MatSort) set matSort(ms: MatSort) {
this.sort = ms;
this.setDataSourceAttributes();
}

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.setDataSourceAttributes();
}

setDataSourceAttributes() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}

constructor(private psService: PsService, private router: Router) { }
}

html

<mat-toolbar color="primary" [ngStyle]="{'height': '120px','padding-top' :'30px'}"> 

<mat-form-field appearance="outline" style="width:100%" >
<input matInput (keyup)="applyFilter($event.target.value)"  >
<mat-label>Rechercher un professionel</mat-label>
</mat-form-field>

<span class="example-spacer"></span>
</mat-toolbar>

<mat-card [ngStyle]="{'margin': '5px'}" *ngIf="dataSource?.filteredData.length">

<mat-table  [dataSource]="dataSource" [ngStyle]="{ 'width':'100%'}" matSort>
.....
</mat-table>

Answer 1

你试过了吗:

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

编辑：好的，所以您应该在模板的局部变量中注册您的输入：

 <input matInput (keyup)="applyFilter($event.target.value);" #filterInput >

然后在你的 table 上应用结构指令：

<mat-table  [dataSource]="dataSource" [ngStyle]="{ 'width':'100%'}" matSort *ngIf="filterInput.value.length > 3">

Answer 2

每次需要时都编写过滤逻辑可能不是一个好习惯。如果您需要更多的表格和过滤，那么您最终将重复代码。我建议创建一个过滤指令或使用已经为 angular material 创建的指令：mat-table-filter

我最近为我的项目创建了这个库，并决定发布以供社区使用。

仅当我查找 3 个字符时才显示 table

Show the table only when I looked for 3 characters

filter

angular-material

angular

mat-table