更改在ngFor循环中调用的内部组件的父项的值

<ul>
  <li *ngFor="let item of items; let i = index">
    <app-child [item]="item" (itemChange)="onItemChange(i, $event)"></app-child>
  </li>
</ul>

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];

  onItemChange(index: number, newValue: string) {
    this.items[index] = newValue;
  }
}

<input [(ngModel)]="localItem" (ngModelChange)="onChange()">

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() item: string;
  @Output() itemChange = new EventEmitter<string>();

  localItem: string;

  ngOnInit() {
    this.localItem = this.item;
  }

  onChange() {
    this.itemChange.emit(this.localItem);
  }
}