angular - 在 Angular 中过滤响应对象

Question

我正在发出一个发布请求，并希望根据条件过滤对象响应以获取一些数据，因此在我的对象响应中，我需要过滤并找到网上银行的对象数组，根据我在谷歌上的发现，这是我尝试过的:

响应对象:

{
  "header":
  {
    "serviceId":"xxx",
    "productCode":"xxx",
    "transactionId":"xxx"
  },
  "data":
  {
    "items":
    [
      {
        "paymentModel":"Retail Banking",
        "paymentChannels":
        [
          { "name":"A", "status":"Active" },
          { "name":"B", "status":"Active" },
          { "name":"C", "status":"Active" },
          { "name":"D", "status":"Active" }
        ],
        "name":"Internet Banking",
        "logoUrl":"xxx"
      },
      {
        "paymentModel":"Retail Banking",
        "paymentChannels":
        [
          {
            "bankFeeRate":"0",
            "ccIsRequired":true,
            "name":"R",
            "currency":
            [{
              "isoCode":"xxx",
              "name":"xxx"
            }],
            "bankFeeType":"xxx",
            "paymentChannelId":"9",
            "status":"Active",
            "acceptedCard":
            [
              "visa",
              "mastercard"
            ]
          },
          {
            "bankFeeRate":"0",
            "ccIsRequired":true,
            "name":"M",
            "currency":
            [{
              "isoCode":"xxx",
              "name":"xxx"
            }],
            "bankFeeType":"fixed",
            "paymentChannelId":"13",
            "status":"Active",
            "acceptedCard": [ "amex" ]
          }
        ],
        "name":"Credit Card",
        "logoUrl":"xxx"
      }
    ],
    "metadata": { "count":2 }
  },
  "status":
  {
    "code":"200",
    "message":"OK"
  }
}

component.ts

getPaymentChannel() {
  this.paymentService.getData(data)
  .pipe( map(
      res => res.filter(items => items.data.items ==='Internet Banking')
      .subscribe(res => console.log(res))
  ))
}

我想使用 *ngFor 在 html 中显示 'PaymentChannels[]'，所以我想我需要按名称过滤此响应，即 credit card 或 internet banking，这是我的 stackblitz 链接 demo ,我是 rxjs 和 typescript 的新手，有人可以指导我吗？

Answer 1

如果您知道您只查找一项，则可以使用 find，它会返回一个对象。但是让我们在这里使用 filter，因为这就是您想要使用的。

显然你想通过 items 中的 name 进行过滤，因此你的过滤器应该如下所示:

 map((res: PaymentModel) => 
   res.data.items.filter((x: Item) => x.name === 'Internet Banking')

如果找到，它将返回一个包含所有匹配项的数组。所以现在你想在 html 中显示 paymentChannels，迭代数组并添加一个嵌套的 ngFor 来迭代 paymentChannels:

<div *ngFor="let dat of myData">
  <div *ngFor="let p of dat.paymentChannels">
    <!-- ... -->
  </div>
</div>

Your forked STACKBLITZ

同样使用find: STACKBLITZ