如何在Angular2+；样板

我用的是角度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'
},

//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>

在.html中，我希望显示如下：

类型1 此处显示所有对象都具有相同的属性-E值（类型1）

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

类型3 此处显示所有对象都具有相同的属性-E值（类型3）

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

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'
},

//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>

//unique-property-E-arr是包含property-E的所有唯一值的数组
{{property-E}}

它可以工作，但会循环通过所有选项以获得具有相同属性-E值的选项。例如，如果optionList.length为100，则循环会发生100次（属性-E的唯一值），这会减慢我的应用程序。

---

我是否需要将此逻辑移动到ts以及如何移动。标准角度应用程序解决此问题的最佳实践是什么？将所有逻辑保留在模板中或移至.ts？

使应用程序变慢的是ngIf条件的数量，因为在页面上每次更改后都会重新检查这些条件。这意味着，如果数组中有100个元素，那么在与应用程序交互时，将无限期地计算100个if条件。我建议将您的一些逻辑转移到ts文件，这肯定会加快您的应用程序。 您可以创建另一个对象，该对象将根据类型在列表中包含分组选项。在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]);    
    }
}

//创建一个对象以包含每个元素的对象
选项ListGroupedByType:任何={
类型1:[]，
类型2:[]，
类型3:[]，
类型4:[]，
类型5:[]，
};
//所有独特类型
唯一类型：字符串[]=[“type1”、“type2”、“type3”、“type4”、“type5”]
//函数，该函数将根据类型对optionListGroupedByType中的optionList进行分组。注意：从服务返回optionList后，应调用此选项。
SetOptions ListByType（）{
for（设i=0；i
{{obj['property-A']}
根据@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]);    
          }
    }

optionListGroupedByType:{[k:string]：[]}={}；
SetOptions ListByType（）{
for（设i=0；i