Wählen Sie Option Filter in Angular 4 mit Rohr

Question

Ich versuche, eine Pipe mit dem Dropdown-Auswahlfeld zum Filtern der Liste in JSON-Daten zu erstellen. Ich habe eine Pipe mit Selectbox-Pipe erstellt. Ich bin nicht in der Lage, meine Filterarbeit im Rohr zu bekommen. Bitte helfen Sie. Hier ist mein Code -

Select Box -

<select class="form-control" [(ngModel)]="sel" name="sel"> 
    <option selected disabled>Select</option> 
    <option *ngFor="let positionOpt of positionSelect" [value] = "sel">{{positionOpt.name}}</option> 
</select> 

Daten für SelectBox Optionen Feld -

positionSelect:any[] = [ 
{ 
    name: "Social Media Manager", 
    position: "Social Media Manager" 
}, 
{ 
    name: "Product Manager", 
    position: "Product Manager" 
} 
] 

Rohr für selectbox -

import { Pipe, PipeTransform } from '@angular/core'; 
import { JobsService } from '../services/jobs.service'; 

@Pipe({ 
    name: 'selectbox' 
}) 
export class SelectboxPipe implements PipeTransform { 

    transform(opt: any, sel?: any): any { 
    return (opt || opt === '0') 
     ? opt.filter(sal => { return sal.position == sel}) 
     : opt; 
} 

} 

Jobliste Daten -

<ul class="jobs-list"> 
    <li *ngFor="let joblists of jobList | selectbox: sel"> 
     {{joblists.position}} 
    </li> 
</ul> 

Diese JobList-Daten in Json stammen von einem Dienst. Sollte ich * ngFor in wählen Option Feld von JobList oder es ist in Ordnung aus anderen JSON-Daten. Bitte helfen Sie mit Selectbox-Filter.

Answer 1

Try this:

import { Pipe, PipeTransform } from '@angular/core'; 
import { JobsService } from '../services/jobs.service'; 

@Pipe({ 
    name: 'selectbox' 
}) 
export class SelectboxPipe implements PipeTransform { 

    transform(items: any, sel?: any): any { 
     return sel ? items.filter(sal => sal.position === sel) : items; 
    } 
} 
<select class="form-control" [(ngModel)]="sel" name="sel"> 
    <option *ngFor="let positionOpt of positionSelect" [ngValue]="positionOpt.position">{{positionOpt.name}}</option> 
</select> 

<ul class="jobs-list"> 
    <li *ngFor="let joblists of jobList | selectbox: sel"> 
     {{joblists.position}} 
    </li> 
</ul> 

Answer 2

Try this: ich sel Wert haben, die Sie in Dropdown-Liste ausgewählte Objekt. daß Werte ist in selectbox.pipe.ts

app.component.html

<select class="form-control" name="sel" id="sel" [(ngModel)]="sel"> 
    <option [ngValue]="undefined" disabled selected>Select...</option> 
    <option *ngFor="let positionOpt of positionSelect" [ngValue]="positionOpt">{{positionOpt.name}}</option> 
</select> 

<ul class="jobs-list"> 
    {{sel}} 
    <li *ngFor="let joblists of jobList | selectbox: sel"> 
     {{joblists.position}} 
    </li> 
</ul> 

app.component.ts

export class AppComponent { 
    private sel: any; 
    private jobList: any[]; 
    private positionSelect: any[] = [{ 
     name: "Social Media Manager", 
     position: "Social Media Manager" 
    }, 
    { 
     name: "Product Manager", 
     position: "Product Manager" 
    }] 
} 

selectbox.pipe console.log. ts

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core' 
import { BrowserModule } from '@angular/platform-browser' 

@Pipe({ 
    name: 'selectbox' 
}) 

export class SelectboxPipe implements PipeTransform { 
    transform(opt: any, sel?: any): any { 
     console.log('sel', sel); 
     return (opt || opt === '0') ? opt.filter(sal => { return sal.position == sel }) : opt; 
    } 
} 

app.module.ts

import { SelectboxPipe } from './selectbox.pipe'; 

@NgModule({ 
    declarations: [ 
     SelectboxPipe 
    ], 
    exports: [ 
     SelectboxPipe 
    ] 
})