Ionic 3-从用户排序的数组中筛选列表

时间:2018-12-28 18:22:24

标签: javascript arrays firebase ionic3 angularfire2

我正在使用Ionic和Firebase开发一个应用程序,该应用程序需要将用户生产的数组与Firebase中的数组进行比较以过滤产品列表。

有一个包含3个项目(A,B和C)的列表,用户可以对其重新排序。应该使用此顺序从另一个具有A,B和C特征的列表中筛选出具有分数并按降序排序的产品。

因此,我需要比较用户进行的排序,仅得出具有相同排序的产品。例如,如果用户对B,A,C进行排序,则结果中仅显示具有相同排序顺序的产品。这意味着A = 50,B = 100,C = 30的产品将具有数组desOrder = [B, A, C]

Firebase是这样的:

- XMnL8KVlJXXXXXXXXXX
    name: "Product 1"
    - desOrder
        0: "B"
        1: "A"
        2: "C"
- XMnX2KVlJXXXXXXXXXX
    name: "Product 2"
    - desOrder
        0: "C"
        1: "B"
        2: "A"
- XnP33RRmNXXXXXXXXXX
    name: "Product 3"
    - desOrder
        0: "A"
        1: "C"
        2: "B"

search.html

<ion-list no-lines>
  <ion-item-group class="reordenar" reorder="true" (ionItemReorder)="reorderItem($event)">
    <ion-item *ngFor="let item of orderItems">
      {{ item }}
    </ion-item>
  </ion-item-group> 
</ion-list>

search.ts

orderItems: any;

constructor(public navCtrl: NavController, public navParams: NavParams) {
   this.orderItems = ["A", "B", "C"];
}

reorderItem(indexes){
   this.orderItems = reorderArray(this.orderItems, indexes);
   console.log(this.orderItems); // can be, e.g., ["B", "C", "A"]
}

searchTo(){
   this.navCtrl.push(ListPage, {this.orderItems}); 
}

就目前而言,我将退回所有产品,而没有任何过滤条件:

list.ts

products: any;

constructor(public navCtrl: NavController, public navParams: NavParams, public listservice: ListService) {
this.getaData();
}

getaData(){
  this.products = this.listservice.getAll();
}

list-service.ts

getAll(){
  return this.db.list('product/').snapshotChanges()
  .map(changes =>{
    return changes.map(c=> {
      const data = c.payload.val();
      const id = c.payload.key;
      return { id, ...data };;
    });
  })
}

重要的是订购,因为所有产品都具有3个特征及其得分(在this question上不相同)

1 个答案:

答案 0 :(得分:1)

如果您尝试过滤以仅显示具有相同顺序的项目,请向具有该顺序的每个项目添加单个属性。因此,在您的示例中:["B", "C", "A"],它将变成属性"itemOrder": "BCA"

现在,您可以使用此属性进行过滤:ref.orderByChild("itemOrder").equalTo("BCA")

由于我认为这可能已经是您的desOrder属性的目的,因此您也可以考虑将其从数组更改为字符串。