web-dev-qa-db-ja.com

angular 6で@Outputを使用してオブジェクトの配列を出力する方法は？

複数の入力フィールドを持つフォームがあります。フォームに入力されたデータを出力して、フォームの@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');
}

だから、何も出てこない！

angulartypescriptangular6angular-componentsangular-forms
2
Debadatta

たぶん、モデルを入力して、イベントとともに返すことを検討する必要があります。

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を使用して、フォームモデルを直接返すこともできます。

1
Thierry Falvo