在角度中筛选响应对象

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"
}
}

组件.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，这是我的堆栈闪电链接演示，我是 rxjs 和打字稿的新手，有人可以指导我吗？

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>

您的分叉堆栈闪电战

相同的使用find：堆栈闪电战