Angular 2-Таблица фильтрации на основе раскрывающегося списка select (оба являются различными компонентами)

Я пытаюсь фильтровать компонент таблицы данных на основе значения, передаваемого раскрывающимся компонентом select.Я использую @Input() атрибут, но выбранные раскрывающиеся данные не передаются компоненту таблицы данных. Если он будет передан, я смогу фильтровать таблицу, используя приведенную ниже логику:

Не уверен, где я делаю неправильно здесь.

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

полная реализация может быть найдена здесь

7
angular javascript ngfor

5 ответов

я исправил вашу проблему в этот plunker. Теперь данные передаются и данные изменяются в соответствии с выбранным значением.

Не стесняйтесь оглядываться и искать объяснение на веб-сайте Angular. 

// Mandatory code with plunkr
4

вы должны использовать Pipe и Observables.

вот простой пример для вашей проблемы:

каждый раз, когда пользователь выбирает значение в событие change. С помощью события вы можете легко получить значение и передать его в наблюдаемый поток.

вы можете получить доступ к наблюдаемому от вашего SelectDataComponent к вашему компоненту таблицы (AppComponent) через элемент ref (#)

снабдите наблюдаемое ваша труба myCustomFilter и подпишитесь на наблюдаемое через асинхронный канал, предоставляемый angular.

*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);
  }
}

модуль

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 { }
4

можно использовать 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)
    }
}

вот тебе бухнуть https://plnkr.co/edit/f4jHaJi3LDxyt91X3X2H?p=preview

3

Я работал над проблемой, даже после добавления ngOnChanges для подкомпонента это не сработало для меня в плунжере.

Он работал только после добавления ngIf в основном компоненте как 

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

Это было странно для меня. благодаря @trichetriche его plunker я увидел, и я заметил это.

2

посмотрите на этот пост.В нем четко говорится о шагах.

вы можете вызвать фильтр канала для события onchange.

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

2