如何在 Angular 中按數組中的屬性過濾對象？

Question

我有一個元素，它是一個數組。 我想通過在數組中過濾來顯示其中一個對象的標題。 像：

<p>{{ element | myFilter:'type':'Type1').title }}</p>

所以我嘗試創建一個 pipe 過濾器：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myFilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        return items.filter(item => item.title.indexOf(filter.type) !== -1);
    }
}

但這沒有用。

我的陣列：

[
      {
       "type": "Type1",
       "title": "Message 1"
      }, 
      {
       "type": "Type2",
       "title": "Message 2"
      }
]

而我要展示的是類型1的標題。比如：

<p>{{ element | myFilter:'type':'Type1').title}}</p>

如何在 Angular 中執行此操作？

堆棧閃電戰

Answer 1

您將數據錯誤地傳遞到 pipe，括號也放置不正確。 您應該修復括號並將數據作為字符串傳遞：

<p>{{ (element | myFilter: 'Type1').title }}</p>

此外，您還在錯誤的屬性上過濾 pipe。 使用 pipe 的更新數據輸入，它應該只是：

export class MyFilterPipe implements PipeTransform {
  transform(items: any[], filter: string): any {
    if (!items || !filter) {
      return items;
    }
    return items.find(item => item.type === filter);
  }
}

Answer 2

您將過濾器 object 傳遞給 pipe 的方式不正確。 你正在傳遞字符串。

像這樣使用：

<p>{{ (element | myFilter: {'type':'Type1'})?.title }}</p>`

還缺少一個(從你的聲明開始