从打字稿中从集合中提取值给出错误

Question

我正在尝试从我的angular 7应用程序中的集合中检索所有产品类型，并以html访问。我收到未定义的错误ProductType。我的财产错了吗？如果您在下面看到该对象是一个数组数组。每个阵列将包含相同的产品类型。例如，如屏幕快照中的策略合作伙伴关系对于第一个阵列相同，Comedled Funds对于第二个阵列相同。我最终需要包含将在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"}]]

数组

Answer 1

您在地图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属性，因此在ProductType上具有析构函数的.map将返回undefined。

如果要接收数组，则在使用析构函数进行映射之前已应用.flat()方法

例如

get MissingProductKeys() {
    return this.AllocationDetails.MissingProducts.flat().map(({ProductType}) => ProductType);
}

或

get MissingProductKeys() {
    return this.AllocationDetails.MissingProducts.flatMap(({ProductType}) => ProductType);
}

-----编辑2 -----

Set是没有重复项的集合，因此当您将数组映射到set中时，所有重复项都将消失，例如let arr = ['a', 'a', 'b', 'c']然后将其解析为集合let set = new Set(arr)，集合为Set <'a'，'b'，'c'>，但是我们希望未设置数组，因此必须将其转换为return Array.from(set.values());，因此返回值将为["a", "b", "c"]

docs