我试图从我的angular 7应用程序中的集合中检索所有产品类型,并在html中访问它。我收到错误的ProductType未定义。我的财产是不对的。如果你看到下面的对象是一个数组数组。每个阵列都包含相同的产品类型例如,如屏幕截图所示,战略合作伙伴关系对于第一个阵列是相同的,Comingled Fund对于第二个阵列是相同的。我最终需要列表,其中包含在UI中迭代的唯一值。所以我将通过的价值观是[战略伙伴关系,混合基金等]
零件
get MissingProductKeys() {
return this.AllocationDetails.MissingProducts.map(({ProductType}) => ProductType);
}
UI
<div *ngIf="MissingProductKeys">
<div *ngFor="let productType of MissingProductKeys">
<div>{{productType.ProductType}}</div>
</div>
<ng-container *ngFor="let group of AllocationDetails.MissingProducts">
<tr><br/></tr>
<tr *ngFor="let post of group">
<td>{{post.ProductName}}</td>
</tr>
</ng-container>
</div>
</div>
JSON - AllocationDetails.MissingProducts
[[{"ProductId":2844,"ProductName":"*DO NOT USE* City Plan LLC","ProductType":"Strategic Partnerships"},{"ProductId":2840,"ProductName":"*DO NOT USE* Baha'i Separate Managed Account","ProductType":"Strategic Partnerships"},{"ProductId":2851,"ProductName":"EnTrustPermal Special Opportunities Evergreen Fund Ltd.","ProductType":"Strategic Partnerships"},{"ProductId":2852,"ProductName":"EnTrustPermal Spafid Multi-Strategy Fund","ProductType":"Strategic Partnerships"}],[{"ProductId":2745,"ProductName":"EnTrust Special Opportunities Fund III Master LP","ProductType":"Commingled Fund"},{"ProductId":2854,"ProductName":"EnTrustPermal Select Opportunities II Ltd.","ProductType":"Commingled Fund"},{"ProductId":2746,"ProductName":"EnTrust Structured Income Fund I Ltd.","ProductType":"Commingled Fund"},{"ProductId":2749,"ProductName":"EnTrust Structured Income Fund II Ltd.","ProductType":"Commingled Fund"},{"ProductId":2778,"ProductName":"EnTrustPermal Structured Income Fund II-A Ltd.","ProductType":"Commingled Fund"},{"ProductId":2794,"ProductName":"EnTrustPermal Hedge Fund Opportunities II Ltd. Continuing","ProductType":"Commingled Fund"}],[{"ProductId":2828,"ProductName":"ICBC Quantitative HengSheng Choice Pooled Fund.","ProductType":"Sub-Advisory "},{"ProductId":2853,"ProductName":"HEC SPV II Cayman LP","ProductType":"Sub-Advisory "},{"ProductId":2800,"ProductName":"TP ETP Offshore LP","ProductType":"Sub-Advisory "},{"ProductId":2829,"ProductName":"ICBC Quantitative Xincheng Choice Pooled Fund Trust.","ProductType":"Sub-Advisory "},{"ProductId":1841,"ProductName":"Brightgate Absolute Return FIL","ProductType":"Sub-Advisory "}],[{"ProductId":2827,"ProductName":"EnTrustPermal Alternative Income Strategy.","ProductType":"Liquid Alternatives"},{"ProductId":1603,"ProductName":"EnTrustPermal Alternative Core Fund","ProductType":"Liquid Alternatives"}]]
排列
你在map cb中使用了析构函数。所以从[{ProductType:“exampleString”}]你会得到[“exampleString”]。
当你迭代MissingProductKeys
时,你调用ProductType
属性。字符串必须是ProductType
attr所以它将返回undefined
。
修复你应该将html更改为
<div *ngFor="let productType of MissingProductKeys">
<div>{{productType}}</div>
</div>
-----编辑-----
结构是
Array<Array<{
"ProductId": number,
"ProductName": string
"ProductType": string
}>
因此,在ProductType上使用析构函数的.map将返回undefined,因为array没有ProductType属性。
如果你想接收数组,你在使用析构函数map之前应用.flat()
方法
EG
get MissingProductKeys() {
return this.AllocationDetails.MissingProducts.flat().map(({ProductType}) => ProductType);
}
要么
get MissingProductKeys() {
return this.AllocationDetails.MissingProducts.flatMap(({ProductType}) => ProductType);
}
----- ----- Edited2
Set是没有重复项的集合,因此当您将数组映射到set时,所有重复项将消失,例如然后let arr = ['a', 'a', 'b', 'c']
解析它设置let set = new Set(arr)
并设置为Set,但是我们想要设置数组,所以我们必须通过return Array.from(set.values());
将它转换为数组,所以返回的值将是["a", "b", "c"]