如何循环遍历 Angular2 + 模板中的动态 JSON 对象

Question

我正在使用 Angular 2 +

在 .ts 中，有一个 JSon 对象 return 来自一个名为 optionList[]

的 API 调用

这个对象的结构如下：

optionList=

{
   property-A: '', property-B: '',property-C: '',property-D:'',property-E: 'type1'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type2'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type1'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type1'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type3'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type4'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type3'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type4'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type4'
},
{
   property-A: '', property-B: '',property-C: '',property-D: '',property-E: 'type5'
},

在.html中，我想显示如下：

type1

此处显示所有具有相同值（type1）的对象属性-E

type2

此处显示所有具有相同值（type2）的对象属性-E

type3

此处显示所有具有相同值（type3）的对象属性-E

........

我所做的是使用 *ngFor 循环遍历属性-E 的唯一值，如下所示：

//unique-property-E-arr is an array contains all the unique value of property-E
<ng-container *ngFor="let property-E of unique-property-E-arr">

  {{property-E}}

  <ng-container *ngFor="let option of optionList">
   <div *ngIf="option.property-E === property-E">
      <!--display each object here -->
   </div>
  </ng-container>

</ng-container>

它有效，但它会遍历所有选项以获取具有相同值属性-E 的选项。例如，如果 optionList.length 为 100，则循环发生 100 X（属性-E 的唯一值）次，这会减慢我的应用程序。我是否需要将此逻辑移至 ts 以及如何。标准 Angular 应用程序解决此问题的最佳做法是什么，将所有逻辑保留在模板中还是移至 .ts？

Answer 1

使您的应用程序变慢的是 ngIf 条件的数量，因为在页面上的每次更改后都会重新检查这些条件。这意味着如果您的数组中有 100 个元素，如果在您与应用程序交互时无限期地计算条件，则为 100 个。我建议将您的一些逻辑转移到 ts 文件中，这肯定会加快您的应用程序。您可以创建另一个对象，该对象将根据类型对 optionsList 进行分组。在你的 ts 文件中：

//create an object to contain objects of each element
optionsListGroupedByType:any={
    type1:[],
    type2:[],
    type3:[],
    type4:[],
    type5:[],
};

//all unique types
uniqueTypes:string[]=["type1","type2","type3","type4","type5"]


//function which will group optionsList in optionsListGroupedByType based on type. Note: This should be called after optionList is returned from the service.
setOptionsListByType(){     
    for(let i=0;i<this.optionList.length;i++)
    {
        this.optionsListGroupedByType[this.optionList[i]["property-E"]].push(this.optionList[i]);    
    }
}

然后基于此，在您的 html 文件中：

<ng-container *ngFor="let type of uniqueTypes">

    {{type}}

    <ng-container *ngFor="let obj of optionsListGroupedByType[type]">

            <!--display each object here -->
            {{obj['property-A']}}

    </ng-container>

</ng-container>

这样，您将避免 100 ngIf 运行ning 多次，您的申请将运行顺利进行。

Answer 2

根据@Nabil Shahid 的回答，我稍微更改了代码以使其正常工作。在我的例子中，类型是未知的，它们是 API 调用的动态类型。

 optionsListGroupedByType: {[k: string]: []} = {};            
 setOptionsListByType(){  
        for(let i=0;i<this.optionList.length;i++)
        {
          //initialize the arrary to avoid the type error: cannot find property push of undefined.
           this.optionsListGroupedByType[this.optionList[i]["property-E"]] = [];
         }   
         for(let i=0;i<this.optionList.length;i++)
         {
           this.optionsListGroupedByType[this.optionList[i]["property-E"]].push(this.optionList[i]);    
          }
    }

如何循环遍历 Angular2 + 模板中的动态 JSON 对象

How to loop through a dynamic JSON object in Angular2 + template

angular2-template

ngfor

angular

type1

type2

type3