<ng-container *ngFor="let conflictRule of conflictRulesMap1 | keyvalue">
<div align="left" class="config-header-name">
<div align="left" class="change-type-name">
<h4>{{getConfigName(conflictRule.key)}}</h4>
</div>
</div>
<div align="left" class="conflict-rule-header">
<p><b><u>Conflicting Rules</u></b></p>
</div>
<div align="center" class="user-modified-change">
<p><b><u>Your Change</u></b></p>
</div>
<div class="ruleSpearator"></div>
<div align="center" class="production-stage-change">
<p><b><u>Production Change </u></b></p>
</div>
<ng-container *ngFor="let ruleContainer of conflictRule.value ,let k = index">
<select-rule (onSelectionChanged)="changeSelection(ruleContainer,$event)"
[changedConfigDataList]="getChangedConfigDataListConflict(conflictRule.key)"
[configId]="getConfigId(conflictRule.key)"
[configLookupMetadata]="configLookupMetadata"
[metadata]="getConfigMetadata()"
[disableExpansion]="disableExpansion"
[index]="k"
[isSaveEnabled]="isSaveEnabled"
[mode]="mode" [userId]="userId"
[openState]="expandRules" [org]="org" [changeId]="change.changeInfo.changeId"
[ruleContainer]="getRuleContainer(ruleContainer)">
</select-rule>
</ng-container>
<div *ngIf="isConfigNonConflict(conflictRule.key)">
<div class="rule-spacing"></div>
<div align="left" class="non-conflict-rule-header">
<p><b><u>Non Conflict Rules</u></b></p>
</div>
<ng-container *ngFor="let ruleContainer of getList(conflictRule.key) ,let k = index">
<select-rule (onSelectionChanged)="changeSelection(ruleContainer,$event)"
[changedConfigDataList]="getChangedConfigDataListForNonConflict(conflictRule.key)"
[configId]="getConfigId(conflictRule.key)"
[configLookupMetadata]="configLookupMetadata"
[metadata]="getConfigMetadata()"
[disableExpansion]="disableExpansion"
[index]="k" [userId]="userId"
[isSaveEnabled]="isSaveEnabled"
[mode]="mode"
[openState]="expandRules" [org]="org" [changeId]="change.changeInfo.changeId"
[ruleContainer]="getRuleContainer(ruleContainer)">
</select-rule>
</ng-container>
</div>
</ng-container>
<ng-container>
<ng-container *ngFor="let nonConflictRule of nonConflictRulesMap1 | keyvalue, let p = index">
<ng-container *ngIf="notInConflict(nonConflictRule.key)">
<div align="left" class="config-header-name">
<div align="left" class="change-type-name">
<h4>{{getConfigName(nonConflictRule.key)}}</h4>
</div>
</div>
<div align="left" class="conflicting-rules">
<p><b><u>Non Conflicting Rules</u></b></p>
</div>
<ng-container *ngFor="let ruleContainer of nonConflictRule.value ,let k = index">
<select-rule
(onSelectionChanged)="changeSelection(ruleContainer,$event)"
[changedConfigDataList]="getChangedConfigDataListForNonConflict(nonConflictRule.key)"
[configId]="getConfigId(nonConflictRule.key)"
[configLookupMetadata]="configLookupMetadata"
[metadata]="getConfigMetadata()"
[disableExpansion]="disableExpansion" [index]="k"
[isSaveEnabled]="isSaveEnabled"
[mode]="mode" [userId]="userId"
[openState]="expandRules" [org]="org" [changeId]="change.changeInfo.changeId"
[ruleContainer]="getRuleContainer(ruleContainer)">
</select-rule>
<div class="rule-spacing"></div>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
The problem is that all *ngFor are running infinite times except the very first one . As mentioned in the in link that avoid the calling of methods from template link
I have crossed checked the data in map and loop.. it is limited data but still it is running infinite times I have verified all the data and it is accurate ..
Any help is appreciated