J'ai une table de matériaux angulaire et la recherche fonctionne bien ...
Le problème est,
J'ai route A et dans cette route, j'envoie une valeur au champ de recherche dans la table de route B et ils ont besoin de définir automatiquement des données filtrées dans une table.
J'obtiens correctement cette valeur dans le champ de recherche du tableau, mais elle n'est pas appliquée au tableau ... si j'ajoute manuellement une lettre ou un chiffre, le filtre fonctionne correctement
Voici le composant A
ngOnInit() {
if (history.state.data) { //history.state.data is passed id
this.searchKey = history.state.data;
this.dataSource.filterPredicate = function(data, filter: string): boolean {
return data.userId.toString() === filter;
};
}
}
Et voici le composant B
goToRouteB(id): void {
this.router.navigate(["/routeB"], { state: { data: id } }); //id: is some number
}
4 Réponses :
Pourquoi ne pas simplement utiliser les paramètres de route et le moyen fourni par @ angular / router pour transmettre les données via les paramètres de route https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero
thnx, mais cela ne répond pas à ma question. Sur mon chemin, j'obtiens des données, et j'obtiens des données dans la boîte de saisie (recherche), mais elles ne sont pas appliquées ... les données ne sont pas filtrées.
Essayez de déplacer votre logique dans ngAfterViewInit:
constructor(private cdr: ChangeDetectorRef) {}
ngAfterViewInit()() {
if (history.state.data) { //history.state.data is passed id
this.searchKey = history.state.data;
this.dataSource.filterPredicate = function(data, filter: string): boolean
{
return data.userId.toString() === filter;
};
}
this.cdr.detectChanges();
}
Comme le dit la documentation Angular ngAfterViewInit :
Répondre après qu'Angular a initialisé les vues et l'enfant du composant vues / la vue dans laquelle se trouve une directive.
Appelé une fois après le premier ngAfterContentChecked ().
Lorsque vous déplacez la logique vers ngAfterViewInit () , j'obtiens cette erreur dans la console Erreur: ExpressionChangedAfterItHasBeenCheckedError: L'expression a changé après avoir été vérifiée. Valeur précédente: 'model: undefined'. Valeur actuelle: 'model: 7'
Vous devez définir le filtre sur votre source de données. Vous ne définissez que le prédicat de filtre. Définissez l'attribut de filtre de votre dataSource dans ngOnInit.
ngOnInit() {
if (history.state.data) { //history.state.data is passed id
this.searchKey = history.state.data;
this.dataSource.filterPredicate = function(data, filter: string): boolean {
return data.userId.toString() === filter;
};
this.dataSouce.filter = this.searchKey; // <-- add this
}
}
c'est la bonne réponse .... mais, aussi il est nécessaire de convertir en chaîne filter en retour ... return data.userId.toString () === filter.toString () ;
ngOnInit() {
if (history.state.data) { //history.state.data is passed filter values
this.filterValues = history.state.data;
this.dataSouce.filter = JSON.stringify(this.filterValues); // <-- add this for multiple filters
}
}