Question

下面我不明白为什么会出现编译错误Cannot use variable 'ft' as the left-hand side of an assignment expression. Template variables are read-only.

如果删除香蕉语法并将其保留为[fileType]，则没有错误，但是当我更改子组件中Select控件的值时，父集合fileTypes中的项目不会更新。我应该如何做才能使父集合得到更新？

父组件

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

子组件

<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

您可以尝试使用以下语法：

<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>

如果它不起作用，请在未启用Angular编译器选项的情况下提供详细信息

"fullTemplateTypeCheck": true,
"strictInjectionParameters": true

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

1 个答案: