Javascript Angular5：在ngFor循环中显示特定元素的编辑表单

listThirdParty组件使用ngFor循环显示元素列表。 每个元素都有一个“编辑”按钮。用户单击特定元素的按钮并看到一个编辑表单（因此该特定元素的所有数据都已填充到该表单中）。EditThirdParty组件显示此编辑表单

用户单击编辑：变量“ThirdPartyEdit”被分配给所选元素并发送到EditThirdParty组件。用户看到该特定元素的表单。这是预期的行为。 但如果用户在第一个编辑表单仍处于打开状态时单击另一个元素上的“编辑”，则用户会看到两个表单，但其中包含用户选择要编辑的最新元素的数据。我知道这是因为我用最后一个选中的项目重新分配了“thirdPartyToEdit”变量。 我不明白如何用正确的数据为每个元素呈现编辑表单

列表第三方组件（父级）：

listThirdParty.html

<div class="third-party-block">
   <div *ngFor="let thirdParty of thirdParties, let i = index">   
       <div class="third-party-element">
           <span (click)="editThirdParty(thirdParty, i)" (click)="thirdParty.form = true" (click)="thirdParty.hideme = false">Edit</span>            
           {{thirdParty.name}}
           <div>Role: {{thirdParty.role}}</div> 
           <div>Email: {{thirdParty.email}}</div>
           <div>Phone: {{thirdParty.phone}}</div>
           <div>Ext.: {{thirdParty.ext}}</div>                   
           <edit-third-party 
                 *ngIf="showEditForm" 
                 [hidden]="!thirdParty.form" 
                 [thirdParty]="thirdPartyToEdit> 
           </edit-third-party>
        </div>      
   </div>     
</div>

编辑
{{thirdParty.name}
角色：{{thirdParty.Role}}
电子邮件：{{thirdParty.Email}
电话：{{thirdParty.Phone}
分机：{第三方分机}
您说用户看到两个表单，我的问题是您如何打开子组件，它是否在对话框/单独视图中？为什么在span中有两个单击事件？您也检查过吗
<div class="third-party-block">
   <div *ngFor="let thirdParty of thirdParties, let i = index">   
       <div class="third-party-element">
           <span (click)="editThirdParty(thirdParty, i)" (click)="thirdParty.form = true" (click)="thirdParty.hideme = false">Edit</span>            
           {{thirdParty.name}}
           <div>Role: {{thirdParty.role}}</div> 
           <div>Email: {{thirdParty.email}}</div>
           <div>Phone: {{thirdParty.phone}}</div>
           <div>Ext.: {{thirdParty.ext}}</div>                   
           <edit-third-party 
                 *ngIf="showEditForm" 
                 [hidden]="!thirdParty.form" 
                 [thirdParty]="thirdPartyToEdit> 
           </edit-third-party>
        </div>      
   </div>     
</div>

@Component({...})
export class EditThirdPartyComponent {
 @Input() thirdParty: any;
 @Output() hideEditThirdParty = new EventEmitter<any>();

 constructor (private requestDist: RequestDistService) {}
    onSubmit(value: any) {
      this.hideEditThirdParty.emit(value)
    }
}

<form #editThirdPartyForm="ngForm" (ngSubmit)="onSubmit(editThirdPartyForm.value)">
   <div class="form-group">
        <input type="text" class="form-control" placeholder="Third Party Name" required [ngModel]='thirdParty.name' name="name">
   </div>   
    ....other form data...            
   <button class="submit" type="submit">Submit</button>     
</form>