Question

我最近学习了Angular2。目前，经过一番搜索，我得到了一个物质模态。但是，我无法找到用户可以输入的数据。

在我目前的模态中，有一个输入字段和一个复选框。关闭控制台日志＆＃34; de dialog closed＆＃34;和＆＃34;真＆＃34;。

这是我的模态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模板中的这部分代码目前负责您从模型中传回的内容：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)"

您还可以将提交时的表单值（使用表单标记上的mySubmitFunction）传递给DialogOverviewExampleDialog中定义的this.dialogRef.close(someVariableContainingValues)。然后，经过某种验证后，使用：NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(getApplicationContext(), "notify_001"); Intent ii = new Intent(getApplicationContext(), MainActivity.class); PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, ii, 0); NotificationCompat.BigTextStyle bigText = new NotificationCompat.BigTextStyle(); bigText.bigText("sdsd"); bigText.setBigContentTitle("Today's Bible Verse"); bigText.setSummaryText("Text in detail"); mBuilder.setContentIntent(pendingIntent); mBuilder.setSmallIcon(R.mipmap.ic_launcher_round); mBuilder.setContentTitle("Your Title"); mBuilder.setContentText("Your text"); mBuilder.setPriority(Notification.PRIORITY_MAX); mBuilder.setLargeIcon(null); mBuilder .setSubText(""); mBuilder.setWhen(System.currentTimeMillis()); mBuilder.setStyle(bigText); NotificationManager mNotificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { NotificationChannel channel = new NotificationChannel("notify_001", "Channel human readable title", NotificationManager.IMPORTANCE_DEFAULT); mNotificationManager.createNotificationChannel(channel); }传递数据。

Answer 2

使用此代码我认为它会起作用：



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

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

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

2 个答案: