从typescript中的集合中提取值,给出错误

问题描述 投票:1回答:1

我试图从我的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"}]]

排列

enter image description here

angular typescript
1个回答
0
投票

你在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"]

docs

© www.soinside.com 2019 - 2024. All rights reserved.