J'essaie de filtrer le composant de table de données en fonction de la valeur transmise par le composant de liste déroulante select.J'utilise l'attribut @Input()
mais les données de liste déroulante sélectionnées ne sont pas passées au composant de table de données . S'il est passé, je serai capable de filtrer la table en utilisant la logique ci-dessous:
Je ne sais pas où je me trompe ici.
onChangeDetected(val){
this.someData= this.someData.filter(x => x.value== val)
}
La mise en œuvre complète peut être trouvée ici
J'ai corrigé votre problème dans ce plunker . Maintenant, les données sont transmises et les données changent en fonction de la valeur sélectionnée.
N'hésitez pas à regarder autour de vous et à chercher des explications sur le site Web d'Angular.
// Mandatory code with plunkr
Vous pouvez utiliser ngOnChanges
import {Component,Input, OnChanges} from '@angular/core';
export class TableDataList implements OnChanges {
ngOnChanges(changes) {
console.log(changes)
if (changes.selected.currentValue) {
console.log(changes.selected.currentValue)
this.selectedData = this.someData.filter(x => {
console.log(x.value, changes.selected.currentValue)
return x.value === changes.selected.currentValue
})
console.log(this.selectedData)
}
}
Voici votre plunk https://plnkr.co/edit/f4jHaJi3LDxyt91X3X2H?p=preview
Regardez ce post.Il est clairement mentionné à propos des étapes.
Vous pouvez appeler un filtre de canal pour un événement onchange.
http://genuinescope.blogspot.com/2017/09/angular2-custom-filter-search-pipe-for.html
J'ai travaillé sur le problème, même après avoir ajouté ngOnChanges
au sous-composant, cela ne fonctionnait pas pour moi dans le lecteur.
Cela a fonctionné pour seulement après avoir ajouté ngIf
dans le composant principal en tant que
<table-data-list *ngIf="selected" [selected]="selected"><table-data-list>
C'était étrange pour moi. Grâce à @trichetriche, son plunker, j'ai vu et j'ai remarqué cela.