本文介绍了如何根据选定的下拉值过滤 *ngFor 结果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

选择类别:

 <ion-option *ngFor="让类别的类别;">{{类别}}</ion-option></离子选择>

列出项目:

 <离子项目><h2>{{item.title}}</h2></ion-item>...</ion-item-sliding>

如何使用(选择)中的值来选择列出哪个类别?我尝试在其中添加一个 ngModule 并将其作为条件传递到滑动 ngFor 中,但它不起作用.

解决方案

你可以使用管道来实现这个

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

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

transform(s[],cat){///逻辑返回过滤数组}

样品 Plunker

更新 1:完整答案

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

transform(records: Array, property:any): any {让 sortedArray=[];如果(属性){sortedArray =_.filter(records, {'office':property.Name]);控制台日志(排序数组);返回排序数组}}

下拉列表和项目列表

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

现场演示

Choosing a category:

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

Listing the items:

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

How can I use the value from (select) to choose which category gets listed? I tried adding a ngModule in and passing it as a condition into the sliding ngFor, but it wouldn't work.

解决方案

You can use a pipe to achieve this

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

In your transform method you can perform your logic

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

return filteredArray
}

Sample Plunker

Update 1 : Complete answer

Custom pipe will have the below code,

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

Dropdown and list of items

<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

这篇关于如何根据选定的下拉值过滤 *ngFor 结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 13:59
查看更多