Question

我尝试根据select下拉组件传递的值过滤数据表组件。我使用@Input()属性但是所选的下拉数据没有传递给数据表组件。如果它被传递，我将能够使用以下逻辑过滤表：

不确定我在这里做错了什么。

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

可以找到完整的实施here

Answer 1

我已在this plunker中更正了您的问题。现在传递数据并根据您选择的值更改数据。

随意环顾四周，寻找Angular网站上的解释。

// Mandatory code with plunkr

Answer 2

您应该使用Pipe和Observables。

以下是您的问题的一个简单示例：

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

您可以通过元素ref（＃）

从SelectDataComponent访问您的表组件（AppComponent）中的observable

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

*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 3

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

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

仅在主要组件中添加ngIf

之后才有效

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

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

Answer 5

看看这篇文章。我们清楚地提到了这些步骤。

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

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

基于选择下拉列表的Angular 2-Filtering表（两者都是不同的组件）

5 个答案: