Kątowa tabela 2-filtrowania na podstawie listy wyboru (obie są różne składniki)

Question

Próbuję filtrować składnik tabeli danych na podstawie wartości przekazywanej przez komponent rozwijany wybierz. Używam atrybutu @Input(), ale wybrane dane rozwijane są nie zostały przekazane do komponentu tabeli danych. Jeśli zostanie przekazany, będę mógł filtrować tabelę za pomocą poniższej logiki:

Nie jestem pewien, gdzie robię źle tutaj.

onChangeDetected(val){ 
    this.someData= this.someData.filter(x => x.value== val) 
} 

Pełne wdrożenie można znaleźć here

Answer 1

ja skorygować swój problem this plunker. Teraz dane są przekazywane, a dane zmieniają się zgodnie z wybraną wartością.

Zapraszam do rozglądania się i szukania wyjaśnień na stronie Angular.

// Mandatory code with plunkr 

Answer 2

Można użyć 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) 
    } 
} 

Oto Twoja upadać https://plnkr.co/edit/f4jHaJi3LDxyt91X3X2H?p=preview

Answer 3

Pracowałem wokół problemu, nawet po dodaniu ngOnChanges do podskładnika to nie działa na mnie w plunker.

on pracował tylko po dodaniu ngIf w głównym składniku jak

<table-data-list *ngIf="selected" [selected]="selected"><table-data-list> 

To było dla mnie dziwne. dzięki @trichetriche jego plunker widziałem i zauważyłem to.

Answer 4

Powinieneś używać Rury i Observables.

Oto prosty przykład dla swojego problemu:

Za każdym razem, gdy użytkownik jest wybranie wartości wydarzenie zmiana jest zwolniony. Dzięki wydarzeniu możesz łatwo uzyskać wartość i przekazać ją do obserwowalnego strumienia.

Można uzyskać dostęp do zaobserwowania z SelectDataComponent do komponentu tabeli (AppComponent) za pośrednictwem elementu ref (#)

Zapewnić obserwowalnym do myCustomFilter rur i zapisz się do zaobserwowania przez rurę asynchronicznym dostarczonych przez kątowy.

*ngFor="let data of someData | myCustomFilter: (selectDataComp.selectedValues$ | async)

AppComponent

import {Component} from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    template: ` 
    <app-select-data #selectDataComp></app-select-data> 
    <table> 
     <th>Value</th> 
     <th>id</th> 
     <tr *ngFor="let data of someData | myCustomFilter: 
     (selectDataComp.selectedValues$ | async)"> 
     <td>{{data?.value}}</td> 
     <td>{{data?.id}}</td> 
     </tr> 
    </table> 
    `, 
    styles: [] 
}) 
export class AppComponent { 
    someData = [ 
    { value: 'ABC', id: '123'}, 
    { value: 'ABC', id: '12'}, 
    { value: 'DEF', id: '23'}, 
    { value: 'DEF', id: '1233'}, 
    { value: 'ABC', id: '13'}, 
    { value: 'DEF', id: '1'}, 
    { value: 'DEF', id: '34'}, 
    { value: 'ABC', id: '56'}, 
    { value: 'ABC', id: '13'}, 
    { value: 'DEF', id: '123'}, 
    { value: 'HIJ', id: '113'} 
    ]; 
} 

SelectDataComponent

import { Component } from '@angular/core'; 
import {Subject} from 'rxjs/Subject'; 
@Component({ 
    selector: 'app-select-data', 
    template: ` 
    <div> 
     <select (change)="onChange($event.target.value)"> 
     <option value="">--please select--</option> 
     <option *ngFor="let option of options" 
      [value]="option"> 
     {{ option }} 
    </option> 
    </select> 
</div> 
`, 
styles: [] 
}) 
export class SelectDataComponent { 
public selectedValues$: Subject<string> = new Subject(); 
public options = ['ABC', 'DEF']; 

onChange(selectedValue) { 
    this.selectedValues$.next(selectedValue); 
} 
} 

myCustomFilter

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ 
    name: 'myCustomFilter' 
}) 
export class MyCustomFilterPipe implements PipeTransform { 
    transform(data: any, toFilter: string): any { 
    if (!toFilter) { return data; } 
    return data.filter(d => d.value === toFilter); 
    } 
} 

AppModule

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import {BrowserAnimationsModule} from '@angular/platform- 
browser/animations'; 
import { SelectDataComponent } from './select-data.component'; 
import { MyCustomFilterPipe } from './my-custom-filter.pipe'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    SelectDataComponent, 
    MyCustomFilterPipe, 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 5

Zobacz ten wpis.Jest wyraźnie mowa o krokach.

Można wywołać filtr rurowy dla zdarzenia onchange.

http://genuinescope.blogspot.com/2017/09/angular2-custom-filter-search-pipe-for.html