【问题标题】:Ionic 3 - Filter a List from an User-sorted ArrayIonic 3 - 从用户排序的数组中过滤列表
【发布时间】:2018-12-28 18:22:24
【问题描述】:

我正在使用 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"

搜索.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>

搜索.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 上不一样)

【问题讨论】:

  • 您希望此类过滤在客户端还是 Firebase 端?客户端更容易实现
  • @Sergey Rudenko 我更喜欢 firebase 端解决方案(将其包含在 list-service.ts 中),但如果您有客户端解决方案,我想看看

标签: javascript arrays firebase ionic3 angularfire2


【解决方案1】:

如果您尝试过滤以仅显示具有相同顺序的项目,请为具有该顺序的每个项目添加一个属性。所以在你的例子中:["B", "C", "A"],这将成为一个属性"itemOrder": "BCA"

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

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

【讨论】:

  • 感谢您的回答!让我看看我是否得到它:用户排序的结果将是一个字符串(而不是一个数组,例如,ordering = "BCA")。在 Firebase 中,它将变为 desOrder: {itemOrder: "BCA"}。那么过滤器将是ref.orderByChild("itemOrder").equalTo(this.ordering)。对吗?
  • 如果您将itemOrder 存储在节点desOrder 中,它会是ref.orderByChild("desOrder/itemOrder").equalTo(this.ordering)。但除此之外,它看起来是正确的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-02-01
  • 1970-01-01
  • 2018-09-27
  • 2021-10-14
  • 1970-01-01
  • 2023-04-04
  • 2014-02-25
相关资源
最近更新 更多