如何在 angular 中创建 pipe 以过滤具有嵌入式数组的对象数组

Question

拜托，我有一个嵌入另一个数组的 object 数组。 我只想显示一张包含已过滤项目的卡片。 请检查我下面的插图。 谢谢

const customerList = [
    {
      id: 1,
      customer: 'Rachel Stone',
      items: ['Sardines', 'Milk', 'Custard', 'Egg']
    },
    {
      id: 2,
      customer: 'John Bull',
      items: ['Vegetable Oil', 'Bread','Egg']
    },
    {
      id: 3,
      customer: 'Tega Paul',
      items: ['sugar', 'milk', 'butter']
    },
 
  ]

我在 pipe 中创建了过滤器

 transform(list: any[], filterText: string): any {
 return list.map(x => {
   x.items ? x.items.filter((item: string) => item.search(new RegExp(filterText, 'i')) > -1) : [];
   })
}

我在这里使用的pipe如下；

<div *ngFor="let order of orders | searchFilter: searchTerm ">
                    <app-item-card 
                    [customer]="order.customer" 
                    [items]="order.items"
                    >
                    </app-item-card>
                    <button >
                        Order
                    </button>
                </div>

物品卡

    <div>
      <div> {{ customer }}</div>
      <div >
        <ul>
           <li  *ngFor="let item of items">{{ item }}</li>
        </ul>
      </div>
    </div>

它是空白的。 我想要做的就是如果我输入custard ，它应该只显示出现 custard 的卡片。

我只是在学习 angular/JavaScript/TypeScript。 如果有人可以提供帮助，我将不胜感激。

Answer 1

你的pipe没有返回任何东西......你需要从pipe返回数据。

检查这个 stackblitz 项目或下面的代码

  transform(list: any[], filterText: string): any {
    if (filterText) {
      return list.map((x) => {
        return x.items
          ? {
              items: x.items.filter((item: any) =>
                item.toLowerCase().includes(filterText.toLowerCase())
              ),
              customer: x.customer,
            }
          : { items: [], customer: x.customer };
      });
    } else {
      return list;
    }
  }