Question

我正在使用Angular 2 +

.ts中，从名为optionList []的API调用返回了JSon对象

该对象的结构如下：

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

在此显示所有具有相同属性（E型）的对象（类型1）

type2

在此显示所有具有相同属性（E）值（类型2）的对象

type3

在此显示所有具有相同属性（E型）的对象（类型3）

..........

我要做的是使用* ngFor遍历property-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倍（属性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多次运行，并且应用程序将平稳运行。

Answer 2

基于@Nabil Shahid的回答，我对代码进行了一些修改以使其工作。就我而言，类型是未知的，它们从API调用开始是动态的。

> cat 5cols
col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||col1|||||col2|||||col3|||||col4|||||col5|||||

> perl -e ' BEGIN {$x=qx(cat 5cols);while($x=~m/([^|]+?)(?=[|]{5})/g){ print "$1,\n"} exit } ' | xargs -n5 | sed 's/,$//g'
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5
col1, col2, col3, col4, col5

>

如何在Angular2 +模板中遍历动态JSON对象

type1

type2

type3

2 个答案: