如何在angular 6 中使用@Output 来发出一个对象数组？

Question

我有一个具有多个输入字段的表单，我想使用@Input 和@Output 在单击提交按钮时输出表单中填写的数据以显示在我的页面中在我的表格中-template.component.ts-

export class FormTemplateComponent implements OnInit, AfterViewInit {

model: any = {};
task: Array<any> = [];
@Output() valueChange = new EventEmitter<any>();

onSubmit() {
  this.task.push({Name: this.model.name, Phone: this.model.phone, 
  Email: this.model.email, Password: this.model.password});
  this.valueChange.emit(this.task);
}

现在在我的 app.component.html 中添加了这个

<app-form-output-io (valueChange)="displayArray($event)"></app-form-output-io>

现在，在 app.component.ts

中定义 displayArray($event)

outputTableArray: any=[];
displayArray(theArray){
  this.outputTableArray=theArray;
  console.log(theArray);
  console.log('the array');
}

所以，什么都没有出现！

Answer 1

也许，您应该考虑键入您的模型，并return将其与您的活动一起使用。

export interface MyModel {
  name: string,
  phone: string,
  email: string,
  password: string
}

export class FormTemplateComponent implements OnInit, AfterViewInit {

model: MyModel = {};
@Output() valueChange = new EventEmitter<MyModel>();

onSubmit() {
  this.valueChange.emit(this.model);
}

您也可以直接使用 ReactiveForms 和 return 表单模型。

Answer 2

我有一个类似的问题，但有一个对象的双向绑定数组。

  @Input()
  services: Service[];

  @Output()
  servicesChange: EventEmitter<Service[]> = new EventEmitter<Service[]>();

在父组件中我有一个单独的下拉列表

<p-dropdown [options]="services"> </p-dropdown>

和一个 Create New Service 打开我的子组件的按钮，

<app-create-service [(services)]="services"></app-create-service>

我可以在其中创建新服务。即使我发出更新的数组，

      this.services.push(newServiceObject);
      this.servicesChange.emit(this.services);

我的下拉菜单没有更新。 EventEmitter 适用于简单数据类型，但不适用于对象。我认为这是因为指向修改列表的指针没有改变，所以我的解决方案是将我的数组复制到另一个数组中：

      this.services.push(newServiceObject);
      this.servicesChange.emit([...this.services]);

如何在angular 6 中使用@Output 来发出一个对象数组？

How to use @Output in angular 6 to emit an Array of Objects?

angular

typescript

angular6

angular-components

angular-forms