更改子组件的值时，Angular 父组件属性不会更新

Question

Below I don't understand why I'm getting the compilation error Cannot use variable 'ft' as the left-hand side of an assignment expression. Template variables are read-only. Cannot use variable 'ft' as the left-hand side of an assignment expression. Template variables are read-only.

If I remove the banana-syntax and leave it as [fileType], then I have no errors, but when I change the value from the Select control in the child component, the item in the parent collection fileTypes does not get updated. How should I do it so the parent collection gets updated ?

parent component

<app-file-type-list-item class="form-row align-items-end" *ngFor="let ft of fileTypes" [(fileType)]="ft"></app-file-type-list-item>

child component

<select name="fileType01" id="fileType01" [(ngModel)]="fileType" (change)="onFileTypeChange()">
 <option *ngFor="let fileType of fileTypes" [ngValue]="fileType">
       {{fileType.name}}</option>
</select>


export class FileTypeListItemComponent {


  @Input() public fileType: FileType;
 
  @Output() fileTypeChange = new EventEmitter();


  public fileTypes;

  constructor(private _entityManagerService: POPEntityManagerService) {
    this.fileTypes = // filled from datasource
    
  onFileTypeChange(): void {
    this.fileTypeChange.emit(this.fileType);
  }
}

Answer 1

Can you try using this syntax:

<app-file-type-list-item class="form-row align-items-end" *ngFor="let ft of fileTypes; let i = index" [(fileType)]="fileTypes[i]"></app-file-type-list-item>

In case if it doesnt work plesase provide details for Angular compiler options in case these options are not enabled

"fullTemplateTypeCheck": true,
"strictInjectionParameters": true