json - 使用管道在 Angular 4 中选择选项过滤器

Question

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

选择框 -

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

SelectBox 选项字段的数据 -

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 的选择选项字段中使用 *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>