Question

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

Answer 1

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

在你的 ts 文件中添加

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

然后你可以在你的数组被填充或更新时调用它

this.cdr.detectChanges();

在处理数组时，出于性能原因，我仍然建议这样做

为什么 ngModel 会导致崩溃？

1 个答案: