如何使用子组件的动态数据用角度2填充表格？

Question

我具有以下DOM结构： 该应用程序组件具有

<app-form-component></app-form-component>

并且表单组件具有以下html代码段：

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
......
</form>
<app-form-detail></app-form-detail>

现在，对于此子详细信息组件app-form-detail，只要有表单提交，它就会创建一个详细信息。每个细节都有一个edit按钮。

可以将数据从app-form-component发送到app-form-detail组件。现在，当我从子组件中单击“编辑”按钮时，必须发送数据以填写表格。

Answer 1

是的，有可能。查看 https://angular.io/guide/component-interaction用于组件交互。

进行这些更改即可.. !!

在form.component.html

<app-form-detail [formEvent]="formEventSubject.asObservable(data)" (formEmitEvent)="editedDetails($event)"></app-form-detail>

在form.component.ts

editedDetails(data){
    console.log(data)
  }

在form-detail.component.ts

 @Output() formEmitEvent = new EventEmitter<any>();
  editForm(data) {
    this.formService.setData(data);
    this.formEmitEvent.emit(data)
  }

在form.component.ts中的editedDetails方法中进行所需的更改以达到预期的结果