打开的 Angular 对话框不起作用

Question

我刚刚开始学习 Angular 5，我只需要单击按钮即可打开一个对话框。应用程序无法构建，我出现的错误是“错误 ts2339 属性对话框在类型 Dashboardcomponent 上不存在”然后我安装了 Angular Material 和 cdk。编译时仍然出现同样的错误。在 html 页面(localhost:4200)上，我收到的错误是“无法读取未定义的属性‘open’”。如何获取对话框并打开 Angular 工作？

typescript :

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:

<div class="main-content">
  <div class="container-fluid">
    <button mat-fab color="warning" (click)="openServerDialog()">open</button>
  </div>
</div>

Answer 1

您需要创建一个dialog within your constructor ，没有 this.dialog.open(...) 会导致无法读取未定义的属性“open”:

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