Bảng 2-Lọc góc dựa trên menu thả xuống chọn (cả hai đều là các thành phần khác nhau)

Question

Tôi đang cố gắng lọc thành phần bảng dữ liệu dựa trên giá trị được chuyển bởi thành phần thả xuống chọn. Tôi đang sử dụng thuộc tính @Input() nhưng dữ liệu thả xuống được chọn không được chuyển đến thành phần bảng dữ liệu. Nếu nó được thông qua, tôi sẽ có thể lọc bảng bằng cách sử dụng logic bên dưới:

Không chắc chắn nơi tôi đang làm sai ở đây.

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

Full thi thể được tìm thấy here

Answer 1

Tôi đã sửa chữa vấn đề của bạn trong this plunker. Bây giờ dữ liệu được chuyển và dữ liệu thay đổi theo giá trị bạn đã chọn.

Hãy thoải mái nhìn xung quanh và tìm giải thích trên trang web của Angular.

// Mandatory code with plunkr 

Answer 2

Bạn có thể sử dụng 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) 
    } 
} 

Dưới đây là liệng bạn https://plnkr.co/edit/f4jHaJi3LDxyt91X3X2H?p=preview

Answer 3

Tôi đã giải quyết được vấn đề này, ngay cả sau khi thêm ngOnChanges vào tiểu hợp phần, nó không hoạt động cho tôi trong trình ngắt.

Nó làm việc cho chỉ sau khi thêm ngIf trong thành phần chính như

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

Đó là xa lạ với tôi. nhờ vào @trichetriche plunker của mình tôi thấy và tôi nhận thấy điều này.

Answer 4

Bạn nên sử dụng Pipe và Observables.

Dưới đây là ví dụ đơn giản cho sự cố của bạn:

Mỗi khi người dùng chọn giá trị, sự kiện thay đổi sẽ được kích hoạt. Với sự kiện, bạn có thể dễ dàng nhận được giá trị và chuyển nó tới luồng có thể quan sát được.

Bạn có thể nhận được quyền truy cập vào các quan sát được từ SelectDataComponent của bạn để thành phần bảng của bạn (AppComponent) thông qua một ref yếu tố (#)

Cung cấp Quan sát để ống myCustomFilter của bạn và đăng ký với các quan sát qua ống async được cung cấp bởi góc cạnh.

*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

Nhìn vào bài đăng này.Nó được đề cập rõ ràng về các bước.

Bạn có thể gọi bộ lọc ống cho sự kiện thay đổi.

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