角度材料对话框未正确显示答案

【问题标题】：Angular material dialog box is not showing properly角度材料对话框未正确显示
【发布时间】：2017-11-17 08:08:52
【问题描述】：

我想在表单提交时弹出一个对话框，我在我的组件类中添加了对话框组件，并在表单提交方法中调用了对话框方法。但是对话框没有正确显示，而只有一个白色的小框出现在它的位置。我在 app.module 文件中添加了它的依赖项，并添加了入口组件。这是代码：

import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';


@Component({
  selector: 'dialog-overview-example',
  template: ''
})
export class DialogOverviewExample {

    animal: string;
    name: string;

    constructor(public dialog: MdDialog) { this.animal = 'tiger'; this.name = 'ali';}

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

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

  }
@Component({
  selector: 'dialog-overview-example-dialog',
  template: '',
})
export class DialogOverviewExampleDialog {

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

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

  }



@Component({
  selector: 'my-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {  


  constructor(public dialog: MdDialog){}


  confirmForm(){
    let dialogueBox: DialogOverviewExample = new DialogOverviewExample(this.dialog);    
    dialogueBox.openDialog();
  }

  onSubmit(){  
    this.confirmForm();  
    let formControls = JSON.stringify(this.reviewForm.value.controlArray);          
    this.formService.createForm(formControls)
      .subscribe(
        data => console.log(data),
        error => console.error(error)
    );
    this.reviewForm.reset();    
  }
}

【问题讨论】：

这是过时的Angular Material 2。最新版本使用Mat...

标签： angular dialog angular-material

【解决方案1】：

这是因为你的template: '',是空的，如果你想用一些东西填充对话框，你应该为它指定任何HTML，否则它将是空的，就像你的情况一样。

【讨论】：