web-dev-qa-db-ja.com

Angular 2-選択ドロップダウンに基づくフィルタリングテーブル（どちらも異なるコンポーネントです）

Selectドロップダウンコンポーネントによって渡された値に基づいてデータテーブルコンポーネントをフィルタリングしようとしています。@Input()属性を使用していますが、選択されたドロップダウンデータがデータテーブルコンポーネントに渡されていません。渡された場合、以下のロジックを使用してテーブルをフィルタリングできます。

ここでどこが間違っているのかわからない。

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

完全な実装を見つけることができます ここ

javascriptangularngfor
7
forgottofly

このプランカー で問題を修正しました。これでデータが渡され、選択した値に応じてデータが変化します。

AngularのWebサイトで、自由に見回して説明を探してください。

// Mandatory code with plunkr
4
user4676340

PipeとObservablesを使用する必要があります。

これがあなたの問題の簡単な例です：

ユーザーが値を選択するたびに、変更イベントが発生します。イベントを使用すると、値を簡単に取得して、監視可能なストリームに渡すことができます。

要素ref（＃）を介して、SelectDataComponentからテーブルコンポーネント（AppComponent）へのオブザーバブルへのアクセスを取得できます。

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

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

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
Rakeschand

この投稿を見てください。手順について明確に述べられています。

Onchangeイベントのパイプフィルターを呼び出すことができます。

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

2
user2481212

サブコンポーネントにngOnChangesを追加した後でも、プランカーでは機能しませんでしたが、問題を回避しました。

としてメインコンポーネントにngIfを追加した後にのみ機能しました

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

それは私には奇妙でした。 @trichetricheのおかげで、私が見た彼のプランカーに気づきました。

2
Sunil Kumar