为什么 ngModel 导致崩溃？

Question

我在 *ngFor 循环中使用 [(ngModel)]。但这会导致无限循环和浏览器崩溃。

这是我的 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 来绑定 ngModel，但这也不起作用。经过一些谷歌搜索后，我尝试了索引，但这也不起作用。我希望有人可以帮助我解决它。谢谢。

Answer 1

我怀疑这是一个无限循环，但如果你的数组非常大，特别是如果它经常更新，它可能感觉像是一个无限循环......你可以尝试强制 angular 仅在你强制它时更新到.

在你的ts文件中添加

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

然后您可以在阵列被填充或更新时调用它

this.cdr.detectChanges();

在处理数组时出于性能原因我还是建议这样做

为什么 ngModel 导致崩溃？

why is ngModel causing crash?

typescript

ngfor

ngmodel

angular