关闭角度材料对话框

Question

学习angular2材料。我终于打开了模态。但问题是当我点击模态的一侧时它关闭（现在不是期望的结果）但那不是当前的问题。当我单击取消时，模态未关闭并抛出错误。如果我保持this.dialogRef.close（）注释掉应用程序构建，但是当单击关闭按钮时，模态不会关闭。如果我取消注释该行，则应用程序不会构建。

任何建议或我缺少什么才能正常工作？

由于 特洛伊

这是我的组件代码：

import { Component, OnInit, Inject } from '@angular/core';
import { IGame } from './game/game';
import { Game } from './models/game.model';
import { GameService } from './services/game-service';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { MdSnackBar } from '@angular/material';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 title = 'app';
 games: any[] = [ ];    
 selectedRow: Object;
 setClickedRow: Function;
 myControl: FormControl = new FormControl();

 animal: string;
 name: string;
 girl: string;

 options = [
  'Football',
  'Basketball',
  'Baseball',
  'Lacrosse',
  'Volleyball'
 ];

 filteredOptions: Observable<string[]>;

constructor(private _gameService: GameService,public snackBar: MdSnackBar, 
public dialog: MdDialog) {
  this.filteredOptions = this.myControl.valueChanges
  .startWith(null)
  .map(val => val ? this.filter(val) : this.options.slice());
 }
 filter(val: string): string[] {
   return this.options.filter(option =>
  option.toLowerCase().indexOf(val.toLowerCase()) === 0);
 }

 onSelect(game: Game): void {
  this.selectedGame = game;
 }

 openSnackBar(message) {
   this.snackBar.open(message,null, {
   duration: 2000,
  });
 }

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogDataExampleDialog, {
    width: '250px',
    data: { 
    animal: this.animal, 
    girl:this.girl
   }
 });

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

 });
}

ngOnInit() {
  return this._gameService.getGames()
   .subscribe(
     (gameData) => this.games = gameData,
     (error) => this.openSnackBar("Something broke!"),
     ()=> this.openSnackBar("Data loaded successfully")
    );

  }
}

@Component({
  selector: 'dialog-data-example-dialog',
  template: `
   <div md-dialog-content>
     <p>What's your favorite animal?</p>
     <md-form-field>
     <input mdInput tabindex="1" [(ngModel)]="data.animal">
    </md-form-field>

    <p>Whos's your favorite white girl</p>
   <md-form-field>
    <input mdInput tabindex="2" [(ngModel)]="data.girl">
  </md-form-field>
  </div>

  <div md-dialog-actions>
   <button md-button [md-dialog-close]="data" tabindex="2">Ok</button>
   <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
  </div>
  `,
 })
  export class DialogDataExampleDialog {
    constructor(dialogRef: MdDialogRef<DialogDataExampleDialog>,
    @Inject(MD_DIALOG_DATA) public data: any) {}

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