Как использовать @Output в angular 6 для создания массива объектов?

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>

Теперь, определение displayArray ($ event) в app.component.ts

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 и возвращать модель формы напрямую.