Angular 2-过滤 table 基于 select 下拉列表（两者是不同的组件）

Question

我正在尝试根据 select 下拉列表 component.I 传递的值过滤数据 table 组件，我使用 @Input() 属性，但 selected 下拉列表数据未传递给数据 table 组件。如果通过，我将能够使用以下逻辑过滤 table：

不确定我哪里做错了。

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

可以找到完整的实现 here

Answer 1

您可以使用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

Answer 2

我已经在 this plunker 中更正了您的问题。现在数据已传递，数据会根据您选择的值发生变化。

随时四处看看并在 Angular 的网站上寻找解释。

// Mandatory code with plunkr

Answer 3

我解决了这个问题，即使在将 ngOnChanges 添加到子组件之后它在 plunker 中对我不起作用。

只有在主组件中添加 ngIf 作为

后才有效

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

这对我来说很奇怪。感谢@trichetriche 他的 plunker 我看到了，我注意到了这一点。

Answer 4

你应该使用 Pipe 和 Observables。

这里有一个简单的例子来解决你的问题：

每当用户选择一个值时，都会触发更改事件。通过事件，您可以轻松获取值并将其传递给可观察流。

您可以通过元素引用 (#)

访问从 SelectDataComponent 到 table 组件 (AppComponent) 的可观察对象

将 Observable 提供给您的 myCustomFilter Pipe 并通过 angular 提供的异步管道订阅 observable。

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

应用组件

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'}
   ];
}

选择数据组件

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

我的自定义过滤器

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

看这个post.It步骤说的很清楚了

您可以为 onchange 事件调用管道过滤器。

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

Angular 2-过滤 table 基于 select 下拉列表（两者是不同的组件）

Angular 2-Filtering table based on select dropdown (both are different components)

javascript

ngfor

angular