Error: Cannot assign value "$event" to template variable Angular 10

Question

I have strange error when I used to set value to p-dropdown

ERROR: Uncaught (in promise): Error: Cannot assign value "$event" to template variable "bed". Template variables are read-only.
Error: Cannot assign value "$event" to template variable "bed". Template variables are read-only.
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:8348)
    at PropertyWrite.visit (compiler.js:7236)
    at convertActionBinding (compiler.js:7935)
    at prepareEventListenerParameters (compiler.js:16723)
    at Object.params (compiler.js:17822)
    at compiler.js:17599
    at Array.map (<anonymous>)
    at compiler.js:17599
    at compiler.js:16878
    at Array.map (<anonymous>)
    at resolvePromise (zone.js:1215)
    at resolvePromise (zone.js:1165)
    at zone.js:1277
    at ZoneDelegate.invokeTask (zone.js:407)
    at Object.onInvokeTask (core.js:27474)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Zone.runTask (zone.js:179)
    at drainMicroTaskQueue (zone.js:583)

How can I do that if I need to use [(ngModel)]

HTML Code :

<div class="col-12">
     <div *ngFor="let bed of local_bed">
        <p-dropdown [options]="bedType" formControlName="bedTypeID" [(ngModel)]="bed"></p-dropdown>
     </div>
</div>

TS Code:

local_bed: any;
    
selectBedById(id: string) {
     this.roomService.queryRoomBedById(id).subscribe(res => {
         this.local_bed = res;
     });
 }

value when console.log is :

[ "3", "3", "1" ] 

Answer 1

The reason is that you create a "local" variable bed. You can't change it but you are trying to change it when passing to ngModel. You can pass the array item instead like this:

<div *ngFor="let bed of local_bed; let i = index">
        <p-dropdown [options]="bedType" formControlName="bedTypeID" [(ngModel)]="local_bed[i]"></p-dropdown>
</div>

The ngFor expression is slightly upgraded (it includes let i = index) and the ngModel parameter is changed from bed to local_bed[i].