Свойство родительского компонента Angular не обновляется при изменении значения из дочернего компонента

#angular #angular9

Вопрос:

Ниже я не понимаю, почему я получаю ошибку компиляции 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);
  }
}

Ответ №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

1. Да, этот синтаксис, похоже, работает. Ошибок нет, и коллекция родительских компонентов обновляется. Я могу удалить let ft of filetTypes часть, я думаю? Я не знал об этом синтаксисе, это «формальный» способ делать что-то?

2. @Sam дело в том, что у вас есть переменная шаблона, такая же, как у компонента prop. Если вы прочитали руководство по совместимости Angular Ivy, вы можете увидеть, что в нем указано: «Теперь ошибочно присваивать значения переменным только для шаблонов, таким как item в ngFor=»пусть item of items» (ранее компилятор игнорировал эти назначения)». next.angular.io/guide/ivy-compatibility

3. вы правы. Я об этом не знал. Раньше я делал это повсеместно в своих приложениях, так что это немного неудобно. Кроме того, я понимаю, что это эволюция Ivy, но было бы хорошо, если бы команда Angular предоставила «официальный» способ исправить эту ошибку. Я думаю, ваш способ хорош, я просто надеюсь, что он не нарушает никаких принципов angular

4. Я знаю, они пытались изменить и сгенерировать лучшую ошибку для этого, но все же. Вы можете увидеть поток об этом: github.com/angular/angular/pull/34339