如何返回用户输入的数据？

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; };