typescript Angular 对话框打开不起作用

jchrr9hc 于 2022-12-14 发布在 TypeScript

关注(0)|答案(3)|浏览(171)

我刚刚开始学习Angular 5，我只需要打开一个对话框上的按钮点击。应用程序无法建立和错误，我来了是'错误ts2339属性对话框不存在的类型 Jmeter 板组件'我已经安装了Angular 材料和cdk。它仍然来了相同的错误时编译。和在html页面（localhost：4200），错误，我得到的是'无法读取属性'打开'的未定义'。我怎样才能得到对话框，并打开工作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>

typescript

来源：https://stackoverflow.com/questions/48846171/angular-dialog-open-is-not-working

3条答案

按热度按时间

4dc9hkyq1#

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

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

赞(0）回复(0）举报 2022-12-14

yk9xbfzb2#

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

服务器对话框组件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();
  }

}

赞(0）回复(0）举报 2022-12-14

e0bqpujr3#

错误：无法读取未定义的属性'open'：
您的编译器应该指出modal缺少提供程序（有时会重新启动编译器以显示错误消息）
无论如何，你都应该检查一下你的模块。你需要注册你的组件。可能你只是复制了一个类似的文件并重命名了名称。
后来我的工作[看到绿色的变化，以查明我添加到我的模块] enter image description here

赞(0）回复(0）举报 2022-12-14

我来回答

typescript Angular 对话框打开不起作用

3条答案

相关问题

热门标签

最新问答