Angular对话框打开无法工作。

Question

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

typscript:

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>

- ChinnaR

Answer 1

您需要在构造函数中创建一个对话框，否则没有this.dialog.open(...)将导致无法读取未定义的 'open' 属性：

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

- pzaenger

---

即使我在构造函数中设置了它，它仍然无法工作。我正在使用Ag-Grid和一个操作按钮。 - MindRoasterMir

Answer 2

首先在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>

TS 文件

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() }
    });
  }
}

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();
  }

}

- Kasunjith Bimal

---

我已经按照你所说的做了，但是我收到了“dialog未定义”的错误。有什么想法吗？谢谢。 - MindRoasterMir

Answer 3

错误：无法读取未定义的属性“open”：

您的编译器应该提示模态框缺少提供程序（有时您需要重新启动编译器才能获取错误消息）。

无论如何，您都应该查看您的模块。您需要注册您的组件。您可能只是复制了一个类似的文件并重命名了名称。

之后我的工作正常了。请参阅绿色更改以确定我添加到我的模块中的内容：

- A. Lezmann