Angular Material对话框：当父组件中的注入数据更改时，如何更新它们？

将数据注入到材质对话框中效果很好，但是如果父/打开器组件中的数据发生更改（例如来自（WAMP）订阅），如何自动更新这些数据呢？

[更新]
我创建了一个最低版本以尝试如何操作：https ://stackblitz.com/edit/angular-njh44v?embed=1&file=src/app/app.component.ts
打开右下角的控制台并单击带有数字的灰色框。您会看到对话框获取了当前编号，并且此后不再进行更新。
[/更新]

[更新2]
基于第二个“ Jusmpty”的想法，这种连接看起来一目了然（即使对话框在数据到达后第一次显示/更新）：https ://stackblitz.com/edit/angular-thd34f?embed = 1＆file = src / app / app.component.ts
[/ Update]

具体情况如下：

• 有一个区域组件订阅WAMP服务并获取包含部分的所有数据。这将使用* ngFor 绘制所有零件。文件area.component.ts
  
• 每个部分都有一个自己的组件，其中显示一些数据。如果订阅中的数据发生更改，则将针对每个/所有部分正确，自动地更新视图。
  文件part.component.ts和part.component.html
• 单击每个部分都会打开一个对话框，其中显示了更多数据。
  文件part-details-dialog.component.ts和part-details-dialog.component.html

在最后一个动作/步骤上，将发生以下问题：当前数据正在显示（注入），但如果订阅数据中的某些内容发生更改，则不再更新。

area.component.ts

@Component({
  selector: 'app-area',
  template: '<app-part *ngFor="let part of plan" [partData]="part"></app-part>'
})
export class AreaComponent {

  plan = [];

  planasync$ = this.wampService
    .topic('sendplan')
    .subscribe(
      res => {
        let tm = new TableMap();
        this.plan = tm.tableToMap(res.argskw).filter((m) => m.area === 1);
      },
      err => console.log("res err", err),
      () => console.log("res complete"));

  constructor(private wampService: WampService) { }
}

part.component.ts

import { PartDetailsDialogComponent } from './part-details-dialog/part-details-dialog.component';

@Component({
  selector: 'app-part-details',
  templateUrl: './part.component.html'
})
export class PartComponent {
  @Input() partData: any;

  constructor(public dialog: MatDialog) {}

  openDetailsDialog(): void {
    let dialogRef = this.dialog.open(PartDetailsDialogComponent, {
      width: '650px',
      height: '400px',
      data: {
        partData: this.partData
      }
    });
  }
}

part.component.html

<mat-card (click)="openDetailsDialog()">
  <mat-card-title>Nr: {{ partData.partNr }}</mat-card-title>
  <mat-card-content>
      <div>Current speed: {{ partData.speed }}</div>
  </mat-card-content>
</mat-card>

part-details-dialog.component.ts

@Component({
  selector: 'app-part-details-dialog',
  templateUrl: './part-details-dialog.component.html'
})
export class PartDetailsDialogComponent {

  constructor(public dialogRef: MatDialogRef<PartDetailsDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }

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

part-details-dialog.component.html

<h1 mat-dialog-title>Part Details for Nr. {{ data.partData.partNr }}</h1>
<div mat-dialog-content>
  <div>Current speed details: {{ data.partData.speed }}</div>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>