如何在 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;
    }
  }