Javascript 仅打开一个对话框，在按钮上单击“从父零部件开始在子零部件中预涂底漆”

这是一个更大项目的一部分，我试图通过这个例子来简化这个项目。 我用巴比伦主题。我有一个父组件，它有一个for循环，生成一个按钮和一个子组件，每个迭代都有一个对话框。单击此按钮可激活“打底”对话框。但由于它是一个按钮和对话框的循环，只要单击其中任何一个按钮，每个对话框都会打开。（总共3个）。问题是，我不知道如何在点击按钮时定位，只是它将对话框从父组件关联到子组件，而不是所有按钮。我是新来的。有人能帮忙吗？ app.component.html父组件的代码为：

  <div *ngFor="let item of items; let i = index">
    <button type="button" (click)="showDialog(i)" pButton icon="pi pi-info-circle" label="Show"></button>
    <app-child (notify)="parentListener($event)"></app-child>
  </div>
</div>

child.component.html的代码为：

<p-dialog header="Godfather I" [(visible)]="display" [modal]="true" [responsive]="true" [style]="{width: '350px', minWidth: '200px'}" [minY]="70"
          [maximizable]="true" [baseZIndex]="10000">
  <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
    kind and benevolent to those who give respect,
    but given to ruthless violence whenever anything stands against the good of the family.</p>
  <p-footer>
    <button type="button" pButton icon="pi pi-check" (click)="display=false" label="Yes"></button>
    <button type="button" pButton icon="pi pi-close" (click)="returningDataToParent()" label="No" class="ui-button-secondary"></button>
  </p-footer>
</p-dialog>

故事开始于纽约一个黑手党家族的首领唐·维托·科利昂监督女儿的婚礼。
他的爱子迈克尔刚刚从战争中归来，但不打算成为他父亲事业的一部分。
通过迈克尔的一生，家族企业的性质变得清晰起来。家族的生意就像家族的首脑，
对那些给予尊重的人是仁慈的，
但一旦有任何事情违背了家庭的利益，就会采取残忍的暴力

child.component.ts的代码为：

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

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

  constructor() { }

  ngOnInit() {

  }

  returningDataToParent() {
    this.notify.emit(false);
  }
}

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
@组成部分({
选择器：“应用程序子项”，
templateUrl:“./child.component.html”，
样式URL:['./child.component.css']
})
导出类ChildComponent实现OnInit{
@输入（）
显示：布尔；
@输出（）
notify:EventEmitter=neweventemitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
returningDataToParent（）{
this.notify.emit（false）；
}
}

parentListener是侦听器函数，当我单击app child对话框中的取消按钮关闭它时。我将删除I参数，因为我不在showDialog上使用它

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

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

  constructor() { }

  ngOnInit() {

  }

  returningDataToParent() {
    this.notify.emit(false);
  }
}