The usage of [(ngModel)] within a *ngFor-Loop is causing an endless loop and crashing the browser.
This is how my HTML looks:
<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> This is the data type for elements in values:
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)] to the input field causes the issue. I initially tried using item.key for binding with ngModel, but that didn't work either. After some research online, I attempted to use the index, which also failed. Any assistance in resolving this problem would be highly appreciated. Thank you.