Показывать таблицу только тогда, когда я искал 3 символа - PullRequest
Новая
       53

Показывать таблицу только тогда, когда я искал 3 символа

0 голосов
/ 03 мая 2019

Я работаю с угловым, угловым материалом и огненной базой.

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

К минусам я бы отобразил свойданные только тогда, когда я уже ввел 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>

Ответы [ 2 ]

3 голосов
/ 03 мая 2019

Вы пробовали: 

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 >

и затем примените структурную директиву к вашему столу: 

<mat-table  [dataSource]="dataSource" [ngStyle]="{ 'width':'100%'}" matSort *ngIf="filterInput.value.length > 3">
1 голос
/ 03 мая 2019

Написание логики фильтрации каждый раз, когда вам нужно, может не быть хорошей практикой.Если вам понадобится больше таблиц и фильтров, то в конечном итоге вы будете повторять код.Я бы порекомендовал создать директиву для фильтрации или использовать уже созданную для углового материала директиву: mat-table-filter

Я недавно создал эту библиотеку для своих проектов и решил:публиковать для использования сообществами.

...