Как пройти через динамический объект JSON в шаблоне Angular2 +

Question

Я использую Angular 2 +

в .ts, есть объект JSon, возвращаемый из вызова API с именем optionList []

Структура этого объекта выглядит следующим образом:

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

здесь отображаются все объекты, имеющие одинаковыйзначение (тип 3) свойства-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 раз (уникальное значение свойства-E), что замедляет мое приложение.Нужно ли перенести эту логику на тс и как.Как лучше всего использовать стандартное приложение Angular для решения этой проблемы, оставить всю логику в шаблоне или перейти на .ts?

Answer 1

Основываясь на ответе @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]);    
          }
    }

Answer 2

Что замедляет работу вашего приложения, так это количество условий ngIf, потому что эти условия перепроверяются после каждого изменения на странице.Это означает, что если в вашем массиве 100 элементов, то 100, если условия вычисляются бесконечно, пока вы взаимодействуете с приложением.Я бы порекомендовал перенести часть вашей логики в файл 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]);    
    }
}

Затем, основываясь на этом, в вашем 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 нг, если вы будете запускаться несколько раз, и ваше приложение будет работатьплавно.