我刚刚开始学习Angular 5,我只需要在点击按钮上打开一个对话框。应用程序无法构建,我即将出现的错误是'错误ts2339属性对话框在Dashboardcomponent类型上不存在' 然后我安装了角材料和cdk。在编译时它仍然会出现相同的错误。在html页面(localhost:4200)上,我得到的错误是'无法读取属性'未定义'打开'。如何获得对话框并打开角度工作?
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>
答案 0 :(得分:4)
您需要创建一个dialog within your constructor,但无法在{em>无法读取属性'open'未定义:
this.dialog.open(...)
答案 1 :(得分:0)
首先在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();
}
}