根据按钮单击的类别过滤 *ngFor 中的项目 - Angular

Question

我有一个使用 *ngFor 循环的项目列表。 我在列表上方有类别按钮，如下图所示的 HTML。 我需要实现的是在单击按钮时，我想根据单击的按钮的类别过滤列表。

我不确定哪种方法更好，是 go 是 pipe 还是只是 function

<div class="quick-filter-container">
    <button class="quick-filter-button active" [class.active]="isActive('cat1')" (click)="setActive('cat1')"
        type="button">Category1</button>
    <button class="quick-filter-button" [class.active]="isActive('cat2')" (click)="setActive('cat2')"
        type="button">Category2</button>
    <button class="quick-filter-button" [class.active]="isActive('cat3')" (click)="setActive('cat3')"
        type="button">Category3</button>
    <button class="quick-filter-button" [class.active]="isActive('cat4')" (click)="setActive('cat4')"
        type="button">Category4</button>
</div>


<div class="meter-reading-list-conatiner" *ngFor="let data of filteredList">
    <h1>{{data.address.addressName}}</h1>
    <div *ngFor="let header of data.premiseMeters"> 
        <span> ID: {{header.meterNumber}}</span>
    </div>
</div>

setActive(buttonName) {
 this.activeButton = buttonName;
 }
isActive(buttonName) {
return this.activeButton === buttonName;
}

JSON

this.filteredList = {
  "meterReadPanelReportList": [
    {
      "premiseId": 674052,
      "address": {
        "addressName": "CHILDRENS ROAD, LIMERICK, CO. LIMERICK"
      },
      "premiseMeters": [
        {
          "meterNumber": "Y00001410",
          "utilType": "elec",
          "category": "category1",
          "meters": [
            {
              "lastReadingDate": "23/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            },
            {
              "lastReadingDate": "24/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            }
          ]
        },
        {
          "meterNumber": "Z00001410",
          "utilType": "gas",
          "category": "category3",
          "meters": [
            {
              "lastReadingDate": "23/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            },
            {
              "lastReadingDate": "23/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            }
          ]
        }
      ]
    },
    {
      "premiseId": 674052,
      "address": {
        "addressName": "CHILDRENS ROAD, LIMERICK, CO. LIMERICK"
      },
      "premiseMeters": [
        {
          "meterNumber": "Y00001410",
          "utilType": "gas",
          "category": "category2",
          "meters": [
            {
              "lastReadingDate": "23/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            },
            {
              "lastReadingDate": "24/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            }
          ]
        },
        {
          "meterNumber": "Z00001410",
          "utilType": "gas",
          "category": "category3",
          "meters": [
            {
              "lastReadingDate": "23/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            },
            {
              "lastReadingDate": "23/09/2020",
              "lastReadingMethod": "E",
              "lastReadingStatus": "Pending"
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

从 html 调用 function 并将类别名称作为参数传递

<button class="quick-filter-button active" [class.active]="isActive('cat1')" (click)="myClickFunction('category1')"
    type="button">Category1</button>

在普通 function 上过滤组件中的数据。 期望在这里命名为data的未过滤数据集。

myClickFunction(category){
      this.filteredList = data.filter(item => item.category === category );
}