Angular “角度”对话框“打开”不工作

我刚刚开始学习Angular 5，我只需要点击按钮打开一个对话框。应用程序无法生成，出现的错误是“类型Dashboardcomponent上不存在错误ts2339属性对话框” 然后我安装了angular material和cdk。编译时仍然会出现相同的错误。在html页面（localhost:4200）上，我得到的错误是“无法读取未定义的”属性“open”。如何获得对话框并打开角度工作

脚本：

import { Component, OnInit } from '@angular/core';
import { WebapiService } from '../providers/webapi.service';
import { MatDialog, MatDialogRef } from '@angular/material';
import { ServerDialogComponent } from '../server-dialog/server-dialog.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private webApi: WebapiService) { }

  ngOnInit() {
  }

  openServerDialog() {

    const serverDialogRef = this.dialog.open(ServerDialogComponent, {
      width: '250px',
      data: { serverlist: this.webApi.getServerList() }
    });
  }
}

html:

打开

您需要创建一个，而不使用此对话框。打开（…）会导致无法读取未定义的属性“open”：

---

在AppModule中首次导入MatDialogModule

import {MatDialogModule} from '@angular/material/dialog';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTml文件

<button mat-raised-button (click)="openServerDialog()">Pick one</button>

ServerDialogComponent ts文件

@Component({
  selector: 'server_dialog_component ',
  templateUrl: 'server_dialog_component.html',
})
export class ServerDialogComponent {

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

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

}

@组件({
选择器：'服务器\对话框\组件'，
templateUrl:'server\u dialog\u component.html'，
})
导出类ServerDialogComponent{
建造师(
公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：any{}
onNoClick（）：void{
this.dialogRef.close（）；
}
}

<button mat-raised-button (click)="openServerDialog()">Pick one</button>

import { WebapiService } from '../providers/webapi.service';
import {Component, Inject,OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { ServerDialogComponent } from '../server-dialog/server-dialog.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(public dialog: MatDialog,private webApi: WebapiService) { }

  ngOnInit() {
  }

  openServerDialog() {

    let serverDialogRef = this.dialog.open(ServerDialogComponent, {
      width: '250px',
      data: { serverlist: this.webApi.getServerList() }
    });
  }
}

@Component({
  selector: 'server_dialog_component ',
  templateUrl: 'server_dialog_component.html',
})
export class ServerDialogComponent {

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

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

}