Angular TypeScript使用对话框更改/替换数组中的项

ng generate component edit-dialog

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css']
})
export class EditDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<EditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { item: any, index: number }
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  updateItem(newItem: any): void {
    this.dialogRef.close({ updatedItem: newItem });
  }
}

<h1 mat-dialog-title>Edit Item</h1>
<div mat-dialog-content>
  <mat-form-field>
    <input matInput [(ngModel)]="data.item">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="data.item" cdkFocusInitial>Save</button>
</div>

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { EditDialogComponent } from './edit-dialog/edit-dialog.component';

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

  constructor(private dialog: MatDialog) {}

  openEditDialog(item: any, index: number): void {
    const dialogRef = this.dialog.open(EditDialogComponent, {
      width: '250px',
      data: { item: item, index: index }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result && result.updatedItem !== undefined) {
        this.items[index] = result.updatedItem;
      }
    });
  }
}

<div *ngFor="let item of items; let i = index">
  {{ item }}
  <button (click)="openEditDialog(item, i)">Edit</button>
</div>

const dialogRef = this.dialog.open(EditDialogComponent, {
  width: '250px',
  data: { item: item, index: index }
});

constructor(
  public dialogRef: MatDialogRef<EditDialogComponent>,
  @Inject(MAT_DIALOG_DATA) public data: { item: any, index: number }
) {}

dialogRef.afterClosed().subscribe(result => {
  if (result && result.updatedItem !== undefined) {
    this.items[index] = result.updatedItem;
  }
});

updateItem(newItem: any): void {
  this.dialogRef.close({ updatedItem: newItem });
}