如何根据选定的下拉值过滤 *ngFor 结果答案

【问题标题】：how to filter *ngFor result based on a selected dropdown value如何根据选定的下拉值过滤 *ngFor 结果
【发布时间】：2017-12-29 05:41:53
【问题描述】：

选择一个类别：

 <ion-select name="categories">
    <ion-option *ngFor="let category of categories;">
      {{category}}
    </ion-option>
  </ion-select>

列出项目：

 <ion-item-sliding *ngFor="let item of items; let idx = index;">
    <ion-item>
        <h2>{{item.title}}</h2>
    </ion-item>
...
</ion-item-sliding>

如何使用 (select) 中的值来选择要列出的类别？我尝试在其中添加一个 ngModule 并将其作为条件传递给滑动 ngFor，但它不起作用。

【问题讨论】：

标签： angular ionic-framework ionic3 ngfor

【解决方案1】：

您可以使用ngx-pipes 库在数组和字符串中进行令人难以置信的过滤和转换。

对于您的问题，您可以在ngx-pipes 库中使用 filterBy 管道。

<ion-option *ngFor="let category of categories | filterBy:['name']:selectedVariable;">

【讨论】：

【解决方案2】：

您可以使用管道来实现此目的

 <ion-item-sliding *ngFor="let item of items | categorySelected; let idx = index;">
    <ion-item>
        <h2>{{item.title}}</h2>
    </ion-item>
...
</ion-item-sliding>

在您的转换方法中，您可以执行您的逻辑

transform(s[],cat){
    ///logic

return filteredArray
}

Sample Plunker

更新 1：完整答案

自定义管道将具有以下代码，

transform(records: Array<any>, property:any): any {
      let sortedArray=[];
      if(property){
      sortedArray =_.filter(records, {'office':property.Name]);
      console.log(sortedArray);
      return sortedArray
      }
  }

下拉列表和项目列表

<div>
  <select [(ngModel)]="selectedElement">
    <option *ngFor="let type of types" [ngValue]="type">
      {{type.Name}}</option>
  </select>
  <span *ngFor="let x of array | orderBy:selectedElement">{{x.firstName}}</span>
</div>

LIVE DEMO

【讨论】：

你是对的，pipe 是去这里的正确方式。但也许一个更可靠的例子会帮助这个家伙更多一点。 Pipes in Angular.io docs
管道不应该接收参数吗？这个答案不完整
我可能已经向管道发送了输入。
@Jota.Toledo 检查更新的答案。另请参阅演示。
sortedArray =_.filter(records, {'office':property.Name]);下划线未定义。

【解决方案3】：

你也可以简单的把

    ngOnChanges() {
       this.itemsForDisplay = this.items.filter(element => element.category = this.category);
    }

并在模板中显示 itemsForDisplay 而不是 items

【讨论】：