Change value of parent inside component called in ngFor loop

Question

Using angular 7, I am trying to pass an object to a child component inside a ngFor loop, but when i change the value inside, it doesn't change on the parent.

In my parent i have

<div class="pieceContainer" *ngFor="let piece of data?.piece">
  <app-piece [(data)]="piece" (change)="doSomething(event$)"></app-piece>
</div>

In my child i have the following, i change the value of data inside a modal and i try to output it:

@Input() data: any;
@Output() change: EventEmitter<any> = new EventEmitter<any>();

When from the modal i change the data and i press save, i call:

this.change.emit(this.data);

Does anybody have a clue of why it doesn't update the objects values in the parent component? thanks

Answer 1

应该

@Output() dataChange: EventEmitter<any> = new EventEmitter<any>();

Answer 2

You should pass the shared data. Just minor change in:

<app-piece [data]="piece" (change)="doSomething('data')"></app-piece>

Answer 3

对于某些感兴趣的人来说，答案只是放$ event而不是event $。