无法读取 MatDialogContainer.attachComponentPortal 未定义的属性“hasAttached" [英] Cannot read property 'hasAttached' of undefined at MatDialogContainer.attachComponentPortal

问题描述

Mat 对话框未打开并引发此错误.我还附上了父组件和对话框代码.

Mat dialog is not opening and its throwing this error. I also attached the parent component and dialog codes.

core.js:6272 ERROR TypeError: Cannot read property 'hasAttached' of undefined
at MatDialogContainer.attachComponentPortal (dialog.js:187)
at MatDialog._attachDialogContent (dialog.js:797)
at MatDialog.open (dialog.js:675)
at parentComponent.openJustMeDialog (.component.ts:121)
at parentComponent_div_0_Template_span_click_19_listener (parent.component.html:28)
at executeListenerWithErrorHandling (core.js:22086)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:22128)
at HTMLSpanElement.<anonymous> (platform-browser.js:976)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41916)

父组件

import { Component, OnInit } from '@angular/core';
    import { MatDialog, MatDialogRef } from '@angular/material';
    import { justMeDialog } from './justme-dialog/justme.dialog';
   @Component({
   selector: 'app-parent',
   templateUrl: './parent.component.html',
   styleUrls: ['./parent.component.css']
   })
  export class parentComponent implements OnInit {

  constructor(public dialog: MatDialog) {
  }

  openJustMeDialog(){
    let justMeDialogRef = this.dialog.open(justMeDialog); <--- this one is throwing error
   }
 }

对话框组件

    import { Component } from '@angular/core';

@Component({
  selector: 'app-justMeDialog',
  templateUrl: 'justme.dialog.html',
  styleUrls: ['justme.dialog.css']
})
export class justMeDialog {

  constructor() {
  }
}

我还将 mat 对话框模块导入到 app 模块中.

I also imported the mat dialog module to app module.

推荐答案

请查看角度材质版本.确保使用兼容版本我已经更新了我的材料版本到.@angular/material":^10.0.0"，

Please check the angular material version. Make sure using compatible version i have updated my material version to. "@angular/material": "^10.0.0",

 },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.0.0",
    "@angular/cdk": "^10.0.0",
    "@angular/common": "^10.0.0",
    "@angular/compiler": "^10.0.0",
    "@angular/core": "^10.0.0",
    "@angular/forms": "^10.0.0",
    "@angular/material": "^10.0.0",
    "@angular/material-moment-adapter": "^10.0.0",
    "@angular/platform-browser": "^10.0.0",
    "@angular/platform-browser-dynamic": "^10.0.0",
    "@angular/router": "^10.0.0",
    "angular-in-memory-web-api": "~0.11.0",
    "moment": "^2.26.0",
    "rxjs": "^6.5.5",
    "tslib": "^1.11.2",
    "zone.js": "~0.10.3"
  },

@angular/material":^10.0.0"，@angular/cdk":^10.0.0"，更新角材料版本后，问题得到解决.

"@angular/material": "^10.0.0", "@angular/cdk": "^10.0.0", after updating angular material version the issue is resolved.

这篇关于无法读取 MatDialogContainer.attachComponentPortal 未定义的属性“hasAttached"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！