Angular 一次设置两个javascript变量，角度_Angular_Angular Material

Angular 一次设置两个javascript变量，角度

angular angular-material

Angular 一次设置两个javascript变量，角度,angular,angular-material,Angular,Angular Material,我试图使用弹出对话框同时设置两个变量，但由于某些原因，它只显示playerRequested变量，而不显示activity变量。这里是我的html代码 <body> <h1>Create A Team</h1> <p>Players Needed</p> <input matInput type="number" min="1" max="4" [(ngModel)]="data.requestedPla

我试图使用弹出对话框同时设置两个变量，但由于某些原因，它只显示playerRequested变量，而不显示activity变量。这里是我的html代码

<body>
    <h1>Create A Team</h1>
    <p>Players Needed</p>
    <input matInput type="number" min="1" max="4" [(ngModel)]="data.requestedPlayers">

    <p>Activity</p>
    <mat-button-toggle-group #togglegroup = "matButtonToggleGroup" [(ngModel)]="data.activity">
        <mat-button-toggle value="Unrated">Unrated</mat-button-toggle>
        <mat-button-toggle value="Competitive">Competitive</mat-button-toggle>
    </mat-button-toggle-group>
    {{togglegroup.value}}
    <button mat-raised-button [mat-dialog-close]="data.activity" [mat-dialog-close]="data.requestedPlayers" cdkFocusInitial>Post</button>
</body>


组建一个团队
球员需要
活动
未评级
竞争的
{{togglegroup.value}
邮递

这是我的.ts文件

import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogClose, MatDialogConfig} from '@angular/material/dialog';

export interface DialogData {
  requestedPlayers: string;
  activity: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'val-app';


  requestedPlayers : string;
  activity : string;

  constructor(public dialog: MatDialog) {}

  openDialog(){
    const dialogConfig = new MatDialogConfig();

    let dialogRef = this.dialog.open(CreateTeamOptions, {
      height: '326px',
      width: '237px',
      data: {requestedPlayers: this.requestedPlayers, activity: this.activity}
    });

    dialogRef.afterClosed().subscribe(result =>{
      console.log('Dialog result is: '+ result.activity);
      this.requestedPlayers = result;
      this.activity = result;
    });
  }
}

@Component({
  selector: 'create-team-options',
  templateUrl: 'create-team-options.html',
  styleUrls: ['./create-team-options.scss']
})

export class CreateTeamOptions {


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

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

从'@angular/core'导入{Component，Inject}；
从“@angular/material/DIALOG”导入{MatDialog，MatDialogRef，MAT_DIALOG_数据，MatDialogClose，MatDialogConfig}；
导出接口对话框数据{
请求的播放器：字符串；
活动：字符串；
}
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent{
标题='val app'；
请求的播放器：字符串；
活动：字符串；
构造函数（公共对话框：MatDialog）{}
openDialog（）{
const dialogConfig=new MatDialogConfig（）；
让dialogRef=this.dialog.open（CreateTeamOptions{
高度：'326px'，
宽度：“237px”，
数据：{requestedPlayers:this.requestedPlayers，活动：this.activity}
});
dialogRef.afterClosed（）.subscribe（结果=>{
console.log（'对话框结果为：'+result.activity）；
this.requestedPlayers=结果；
这个。活动=结果；
});
}
}
@组成部分({
选择器：“创建团队选项”，
templateUrl:“创建团队选项.html”，
样式URL:['./创建团队选项.scss']
})
导出类CreateTeamOptions{
建造师(
公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：DialogData{}
onNoClick（）：void{
this.dialogRef.close（）；
}
}

在“打开”对话框中，它应该从设置变量的html文件中保存这两个变量，但由于某些原因，它没有保存

如果你们能帮忙，我将不胜感激！！谢谢

编辑：只是尝试切换它在html上为post按钮设置的第一个按钮，并将第一个按钮设置为两者，但不确定如何以不同方式设置它们

更改对话框组件中的

按钮

，以返回整个

数据

，它应该可以工作。大概是这样的：

<button mat-raised-button [mat-dialog-close]="data" cdkFocusInitial>Post</button>

Post

完成此操作后，

结果

对象将同时具有这两个值

在订阅结束后的对话框中，你应该将

结果.activity

放在

此.activity

中，并将

结果.requestedPlayers

放在

此.requestedPlayers

变量中。

天哪，谢谢你花了我一个小时的时间，从来没有想到过这么简单的事情。非常感谢！另外，我不知道如何结束一个问题，所以如果有人能告诉我或这样做，那就太棒了