typescript 选择带有管道的 Angular 4 中的选项过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46232975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select Option Filter in Angular 4 with pipe
提问by Akshay
I am trying to create a pipe with the selectbox dropdown for filtering the list in json data. I have created a pipe with selectbox pipe. I am not able to get my filter work in pipe. Please help. Here is my code -
我正在尝试使用选择框下拉列表创建一个管道，用于过滤 json 数据中的列表。我创建了一个带有选择框管道的管道。我无法让我的过滤器在管道中工作。请帮忙。这是我的代码 -
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>
Data For SelectBox Options Field -
SelectBox 选项字段的数据 -
positionSelect:any[] = [
{
name: "Social Media Manager",
position: "Social Media Manager"
},
{
name: "Product Manager",
position: "Product Manager"
}
]
Pipe for 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;
}
}
Job List Data -
工作清单数据 -
<ul class="jobs-list">
<li *ngFor="let joblists of jobList | selectbox: sel">
{{joblists.position}}
</li>
</ul>
This jobList data in Json is coming from a service. Should I use *ngFor in select option field from jobList or it is fine coming from different json data. Please help with selectbox filter.
Json 中的这个 jobList 数据来自一个服务。我应该在 jobList 的选择选项字段中使用 *ngFor 还是来自不同的 json 数据很好。请帮助选择框过滤器。
采纳答案by Faly
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>
回答by Chandru
Try this : I got sel value which object you selected in dropdown list. that values is show in selectbox.pipe.ts console.log
试试这个：我得到了你在下拉列表中选择的对象的 sel 值。该值显示在 selectbox.pipe.ts console.log
app.component.html
应用程序组件.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
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
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
app.module.ts
import { SelectboxPipe } from './selectbox.pipe';
@NgModule({
declarations: [
SelectboxPipe
],
exports: [
SelectboxPipe
]
})
