Блог

Я использую [(ngModel)] в *ngFor цикле. Но это приводит к бесконечному циклу и сбою браузера.

это мой html:

   <div class="container">
    <div class="row" *ngFor="let item of controlSystemTargetViewModel.values; let index = index;">
      <div class="col" style="vertical-align: middle; font-weight: bold; margin-bottom: 0.5em;" >{{controlSystemTargetViewModel.values[index].assemblyType}}</div>
      <div class="col">
        <input type="text" name=sg{{index}} class="form-control" style="text-align: center; margin-bottom: 0.5em;" [(ngModel)]="controlSystemTargetViewModel.values[index].key"  mdbInput>
      </div>
    </div>
  </div>       

это тип элементов в значениях:

 import { ControlSystemTargetValueDto } from "src/app/api/models";

export class ControlSystemTargetValueViewModel {
    constructor(private dto: ControlSystemTargetValueDto) {
    }

    get assemblyType() : string {
        return this.dto.assemblyType; 
    }

    get key(): string {
        return this.dto.key;
    }

    set key(val : string) {
        this.dto.key = val; 
    }
} 

controlSystemTargetViewModel.values[index].assemblyType будет показано. Но когда я добавляю [(ngModel)] к входным данным, я получаю проблему. Я использовал item.key first для привязки ngModel , но это тоже не работает. После некоторого поиска в Google я попробовал это с индексом, но это тоже не работает. Я надеюсь, что кто-нибудь может помочь мне решить эту проблему. Спасибо.

Я сомневаюсь, что это бесконечный цикл, но если ваш массив очень большой, и особенно если он часто обновляется, это может показаться бесконечным циклом… вы можете попробовать заставить angular обновляться только тогда, когда вы заставляете его.

В вашем ts-файле добавьте

 @Component({
    ...
    changeDetection: ChangeDetectionStrategy.OnPush,
    ...
})
constructor( ... private cdr: ChangeDetectorRef) {}
 

и затем вы можете вызывать это всякий раз, когда ваш массив заполняется или обновляется

 this.cdr.detectChanges();
 

Я бы предложил это в любом случае по соображениям производительности при работе с массивами