javascript - Angular 4 复选框管道过滤器

Question

您好，我正在尝试制作一个自定义管道过滤器，该过滤器在选中复选框时过滤数据。我有一个工作地点列表，我想在检查某个工作地点时对其进行过滤。我提供与问题相关的代码。

管道代码 -

@Pipe({
  name: 'checkcity'
})
export class CheckcityPipe implements PipeTransform {

  transform(check: any, checked: any): any {
    let [loc] = checked;
    console.log('checked',checked);
    return checked
            ? check.filter(city => {return city.location }) 
            : check;
  }

}

输入复选框 -

<input type="checkbox" value="" [(ngModel)]="checked" name="checked"> Bangalore

要过滤的数据 -

<div *ngFor="let joblist of jobList | checkcity: checked">
    {{joblist.location}}
</div>

Answer 1

您应该将本地变量重命名为joblist，将源重命名为jobLists，它们不应该相同。你可以尝试使用下面的代码

@Pipe({
  name: 'checkcity'
})
export class CheckcityPipe implements PipeTransform {

  transform(check: any, checked: any): any {
    //let [loc] = checked;
    console.log('checked',checked);
    return checked
            ? check.filter(city =>  city.location == checked) 
            : check;
  }

}

<input type="checkbox" value="Bangalore" [(ngModel)]="checked" name="city"> Bangalore

<div *ngFor="let joblist of jobLists | checkcity: checked">
    {{joblist.location}}
</div>