时间戳

首页 > 解决方案 > 如何过滤聚合物中的重组数据（dom-repeat）

arrays - 如何过滤聚合物中的重组数据（dom-repeat）

问题描述

我正在尝试过滤正在动态重新索引的数组。

我想要一个匹配多个属性的字符串的输入字段。

<paper-input value="{{val}}" placeholder="Filter Cards"></paper-input>

<template is="dom-repeat" items="[[restructure(data)]]" initial-count="2" filter="{{filter(val, data)}}">
  <card-items data="[[item]]" items="[[item.items]]" links="false"></card-items>
</template>

...

此函数重组要为卡片布局格式化的数据。

returnInvoices(data) {
  let newData = [];
  for (let i = 0; i < data.length; i++) {
    let noOrder = data[i].noOrder;
    if (!newData[noOrder]) {
      newData[noOrder] = {
        idMaster: data[i].idMaster,
        itemId: data[i].itemId,
        description: data[i].description,
        noOrder: noOrder,
        items: []
      };
    }
    newData[noOrder].items.push('{' +
      '"idMaster":"' + data[i].idMaster + '",' +
      '"itemId":"' + data[i].itemId + '"}');
  }
  return newData.filter(val => val).sort((a, b) => {return b.noInvoice - a.noInvoice}) // reindex array
}

我希望此函数返回数组中具有与字符串匹配的属性的对象。

filter(val, data) {
  if (!val) return null;
    else {
      val = val.toLowerCase();
      // not sure what to do here
      // would like to filter on all object properties (from data)
    return data[0];
  }
}

...

例子

if(val == 1) return data[0] & data[1];

if(val == 'Item') return data[0] & data[2];

对于数据数组

let data = [
  {"itemId": "1", "description": "Nice Item", "noOrder": 123},
  {"itemId": "2", "description": "Good Product", "noOrder": 123},
  {"itemId": "3", "description": "Fine Item", "noOrder": 444}
}

...

如何过滤所有 3 个属性的字符串？

如何使用过滤器作为重组的中间功能？

标签： arraysfilterpolymerpolymer-2.xdom-repeat

解决方案

dom-repeat 的filter 属性的文档包括以下语句：

该函数应与传递给 Array.filter 的排序函数匹配。使用过滤器函数对底层项目数组没有影响。

并且 Array.filter记录为

函数是一个谓词，用来测试数组的每个元素。返回 true 以保留元素，否则返回 false。

true因此，如果任何属性与输入匹配，则从您的过滤器函数中返回，false否则，例如

filter(item) {
  let val = this.val;
  // if the filter is empty show everything
  if (!val) return true;
  // otherwise see is there a match
  val = val.toLowerCase();
  return // for the "description" use "contains" logic
         (item.description.toLowerCase().includes(val)) ||
         // for the "noOrder" use "starting" logic
         (item.noOrder.toString().indexOf(val) == 0)
       // add matching conditions here ...
}

现在要触发过滤，您必须观察触发过滤的属性，即您的 html 就像

<paper-input value="{{val}}" placeholder="Filter Cards"></paper-input>

<template is="dom-repeat" filter="[[filter]]" observe="val" items="[[restructure(data)]]" initial-count="2">
  <card-items data="[[item]]" items="[[item.items]]" links="false"></card-items>
</template>

顺便说一句，为什么要将项目作为字符串推送到 newData 中？为什么不作为对象，即

newData[noOrder].items.push({
  idMaster: data[i].idMaster,
  itemId: data[i].itemId
});

我认为你可能会失去newData.filter(val => val)一步......

推荐阅读