Mettre en œuvre un filtre de recherche pour le <mat-select> la composante angulaire du matériel
Essaie de mettre en place une application simple angulaire 2 à l'aide angulaire du matériel.
J'ai mis en place un tableau simple avec la pagination .
J'ai aussi utilisé mat-select
composant, mais pour ce que je veux mettre en œuvre un filtre de recherche pour le type et la recherche de l'option souhaitée dans la liste.
Ci-dessous montre est mon .fichier html
<table>
<tr><td> Department</td>
<td>
<mat-form-field>
<mat-select placeholder=" ">
<mat-option> </mat-option>
<mat-option *ngFor="let dep of dept" [value]="dep">{{dep}}</mat-option>
</mat-select>
</mat-form-field><br/>
</td>
</tr>
</table>
<br><br>
<button >Search</button>
<button >Reset</button>
<button >Close</button>
<mat-card>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Account No. Column -->
<ng-container matColumnDef="accno">
<mat-header-cell *matHeaderCellDef> Account No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.accno}} </mat-cell>
</ng-container>
<!-- Account Description Column -->
<ng-container matColumnDef="accdesc">
<mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.accdesc}} </mat-cell>
</ng-container>
<!-- Investigator Column -->
<ng-container matColumnDef="investigator">
<mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.investigator}} </mat-cell>
</ng-container>
<!-- Account CPC Column -->
<ng-container matColumnDef="accCPC">
<mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.accCPC}} </mat-cell>
</ng-container>
<!-- Location Column -->
<ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.location}} </mat-cell>
</ng-container>
<!-- Client Dept ID Column -->
<ng-container matColumnDef="cdeptid">
<mat-header-cell *matHeaderCellDef> ClientDeptID </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.cdeptid}} </mat-cell>
</ng-container>
<!-- Dept Description Column -->
<ng-container matColumnDef="depdesc">
<mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.depdesc}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</mat-card>
Ci-dessous montre est mon .fichier ts
import {Component, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss']
})
export class AccountComponent {
dept = [
'Administrative Computer',
'Agosta Laboratory',
'Allis Laboratory',
'Bargaman Laboratory',
'Bio-Imaging Resource Center',
'Capital Projects',
'Casanova Laboratory',
'Darst Laboratory',
'Darnell James Laboratory',
'Deans Office',
'Energy Consultant',
'Electronic Shop',
'Facilities Management',
'Field Laboratory'
];
displayedColumns = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
export interface Element {
accno: number;
accdesc: string;
investigator: string;
accCPC: string;
location:string;
cdeptid: number;
depdesc: string;
}
const ELEMENT_DATA: Element[] = [
{accno: 5400343, accdesc: 'ASTRALIS LTD', investigator:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'}
];
quelqu'un peut-il m'aider à mettre en œuvre un filtre de recherche avec mat-sélectionner un composant dans mon application?
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé la solution pour la recherche de la liste déroulante de valeurs
Voici le code html
Ici est le tapuscrit code
touche fonction permet d'obtenir la valeur entrée
d'effectuer la recherche de la valeur donnée à l'intérieur les valeurs fournies dans la liste déroulante
cette fonction va où votre principale fonction de recherche de l'appel de l'api et de l'obtention des données
- Je utiliser ce un https://github.com/bithost-gmbh/ngx-mat-select-search
Malheureusement, ce n'est Angulaire 5 ( mais peut-être besoin de quelqu'un ici ) web app et compatibilités sont:
Voici de travail Démo aussi - https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.ts
La solution est plutôt facile.
Devrait fonctionner comme un charme 🙂
J'ai trouvé que primefaces angulaire dispose d'une liste à sélection multiple qui vous permet de rechercher listitems. Il comprend également un builtin bouton sélectionner tout! Vous pouvez le trouver ici https://www.primefaces.org/primeng/#/multiselect
Vous pouvez installer primefaces avec
npm install primeng --save
J'ai fait un peu de travail autour de cette même si ses pas la mise en œuvre correcte
composant.hml
`
`
composant.ts
`
`
Effectivement Angulaire Matériel référentiel lui-même vous donne des tas d'exemples qui peuvent vous inspirer. L'un d'eux étant le filtrage de table:
https://github.com/angular/material2/tree/master/src/material-examples/table-filtering