Infinite loop in angular

396 views Asked by At
<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

0

There are 0 answers