Question

我需要执行嵌套的forloop，并且不确定哪个是执行此操作的最佳位置，以及如何执行此操作。这是在我的angular 7应用程序中

我有两个需要循环的数组。外部数组包含productType，而内部数组包含产品名称和产品类型。我需要生成一个列表并显示在包含产品名称跟随的产品类型的UI中。

For e.g
Product Type1
Product Name a
Product Name b

Product Type 2
Product Name a
Product Name b

我该怎么做。我是在html还是在组件端执行。目前，这是我拥有的代码

UI

<div *ngIf="MissingProductKeys">
    <div *ngFor="let productType of MissingProductKeys">
      <div>{{productType}}</div>

    </div>

    <ng-container *ngFor="let group of AllocationDetails.MissingProducts">


      <tr><br /></tr>

      <tr *ngFor="let post of group">
        <!-- <td>{{post.ProductType}}</td> -->
        <td>{{post.ProductName}}</td>

      </tr>
    </ng-container>

组件

 public AllocationDetails: any;

    get MissingProductKeys() {


          const missingProductsTypesNames = this.AllocationDetails.MissingProducts.flat().map(({ ProductType }) => ProductType);
            const uniqueProductTypeNames = new Set(missingProductsTypesNames);
            return Array.from(uniqueProductTypeNames.values());
        }

     getAllocationsDetails(evalDate: string) {
            if (this.ManagerStrategyId != null) {
                this.initGrid();
                //this.GridOptions.api.showLoadingOverlay();
                this.allocationsService.getAllocationsDetails(this.ManagerStrategyId, evalDate)
                    .subscribe(data => {
                        this.AllocationDetails = data;
                        this.GridOptions.rowData = this.AllocationDetails.ManagerAllocations;
                        setTimeout(() => {
                            //  this.GridOptions.api.hideOverlay();
                        }, 100, true);
                    },
                        err => {
                            this.Error = 'An error has occurred. Please contact BSG';
                        },
                        () => {
                            //  this.GridOptions.api.hideOverlay();
                        });
            }
        }

JSON数据

[[{"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":"Test Special Opportunities Evergreen Fund Ltd.","ProductType":"Strategic Partnerships"},{"ProductId":2852,"ProductName":"Test Spafid Multi-Strategy Fund","ProductType":"Strategic Partnerships"}],[{"ProductId":2745,"ProductName":"EnTrust Special Opportunities Fund III Master LP","ProductType":"Commingled Fund"},{"ProductId":2854,"ProductName":"Test 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":"Test Structured Income Fund II-A Ltd.","ProductType":"Commingled Fund"},{"ProductId":2794,"ProductName":"Test 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":"Test Alternative Income Strategy.","ProductType":"Liquid Alternatives"},{"ProductId":1603,"ProductName":"Test Alternative Core Fund","ProductType":"Liquid Alternatives"}]]

嵌套的典型的forloops

0 个答案: