选择选项在Angular 4中用管道过滤

Question

我正在尝试使用selectbox下拉菜单创建一个管道，用于过滤json数据中的列表。我用selectbox管道创建了一个管道。我无法让管道中的过滤器工作。请帮忙。这里是我的代码 -

选择框 -

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

数据对于选择框选项字段 -

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

管的选择框 -

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

} 

工作列表数据 -

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

Json中的此JobList数据来自服务。我应该在jobList的select选项中使用* ngFor还是来自不同的json数据。请帮助选择框过滤器。

Answer 1

试试这个：

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

试试这个： 我有对象，你在下拉列表中选择其中SEL值。该值是在显示selectbox.pipe.ts CONSOLE.LOG

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。 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 
    ] 
})