如何返回用戶輸入的數據？

Question

我最近學習了Angular2。 目前，經過一些搜索，我得到了一個材料模態。 但是，我找不到如何返回用戶可以輸入的數據。

在我目前擁有的模式中，有一個輸入字段和一個復選框。 關閉時，控制台會記錄“關閉對話框”和“ true”。

這是我的模式HTML：

<h2 mat-dialog-title>Add Group</h2>
<mat-dialog-content>
  <div>
    <mat-form-field>
      <input matInput placeholder="Groupname">

    </mat-form-field>
    <mat-form-field>
    <mat-checkbox >Private group?</mat-checkbox>

    </mat-form-field>
    <mat-form-field>
    <button mat-raised-button color="primary">img</button>

    </mat-form-field>

  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>cancel</button>
  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
  <button mat-button [mat-dialog-close]="true" >save</button>
</mat-dialog-actions>

TS代碼：

import { Component, OnInit, Inject } from '@angular/core';
import { GroupsService} from '../../../services/Groups.service';
import { Groups } from '../../../models/groupModel'
import {  MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.scss'],
})
export class GroupsComponent implements OnInit {

  animal: string;
  name: string;
  groups: Groups[];

  constructor(
    private groupsService: GroupsService,
    public dialog: MatDialog
  ){}

  ngOnInit() {
    this.groupsService.getMyGroups()
      .then(group =>{
        this.groups = group;
        console.log(this.groups)
      }).catch(error=>{
      console.log(error);
    });
  }
  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      height: '300px',
      width: '300px',
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      console.log(result);
      this.animal = result;
    });
  }

  testgroup(id){
  console.log(id)
  }
  acceptGroup(){
    console.log('accept')
  }
  declineGroup(){
    console.log('decline');
  }
  createGroup(){
    console.log("sample");
  }

}
@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: './model.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

Answer 1

HTML模板中的代碼的這一部分目前負責您從模型傳回的內容： [mat-dialog-close]="true" 。 如您所見，您只是在傳遞true ，沒有別的。 實現所需功能的最簡單方法是在對話框內創建表單並傳遞其值。

<h2 mat-dialog-title>Add Group</h2>
<mat-dialog-content>
  <form #modalForm="ngForm">
    <div>
      <mat-form-field>
        <input matInput name="groupName" placeholder="Groupname" ngModel>
      </mat-form-field>
      <mat-form-field>
        <mat-checkbox name="privateGroup" ngModel>Private group?</mat-checkbox>
      </mat-form-field>
      <mat-form-field>
        <button mat-raised-button color="primary">img</button>
      </mat-form-field>
    </div>
  </form>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>cancel</button>
  <button mat-button [mat-dialog-close]="modalForm.value">save</button>
</mat-dialog-actions>

您還可以將提交時的表單值（在表單標簽上使用(ngSubmit)="mySubmitFunction(modalForm.value)" ）傳遞給DialogOverviewExampleDialog定義的mySubmitFunction 。 然后，例如，在進行某種形式的驗證之后，使用以下this.dialogRef.close(someVariableContainingValues)傳遞數據： this.dialogRef.close(someVariableContainingValues) 。

Answer 2

使用此代碼，我認為這將是可行的：

 dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); console.log(result); //this.animal = result; }).()=>{ this.animal = result; };