web-dev-qa-db-fra.com

Angular Table de filtrage 2 en fonction du menu déroulant sélectionné (les deux sont des composants différents)

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

javascriptangularngfor
7
forgottofly

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
4
trichetriche

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

3
Rakeschand

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

2
user2481212

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.

2
Sunil Kumar