Question

我有一个具有多个输入字段的表单，我想使用@Input和@Output单击提交按钮，然后将填写在表单中的数据输出到我的页面中在我的form-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

也许，您应该考虑键入模型，并随事件返回它。

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并直接返回表单模型。

如何在角度6中使用@Output发出对象数组？

1 个答案: