Angular 4/5 未捕获错误：模板解析错误：无法绑定到“mat-dialog-close”，因为它不是“button”的已知属性

Question

this has happened when I tried to follow the dialog tutorial from https://material.angular.io/components/dialog/overview and I'm getting the error above so if anyone has an idea of what I should do to solve this problem?

here is my code : the html for the modal

<h1 mat-dialog-title>Warning</h1>

<div mat-dialog-content>
  <p>Are you sure you want to delete the book {{data.title}} ?</p>

</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]="data.title" tabindex="2">Ok</button>
  <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

the class that active the modal:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
  selector: 'app-remove-book',
  templateUrl: './remove-book.component.html',
  styleUrls: ['./remove-book.component.scss']
})
export class RemoveBookComponent implements OnInit {


  constructor(
    public dialogRef: MatDialogRef<RemoveBookComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();  
  }


  ngOnInit() {
  }

}

and the method in the class that supposes to active the modal:
  removeContact(i){ 


    let dialogRef = this.dialog.open(RemoveBookComponent, {
      width: '250px',
      data: { ok: this.ok, title: this.contactsArr[i].title }
    });

    dialogRef.afterClosed().subscribe(result => { 

      console.log('The dialog was closed');

        this.contactsArr.splice(i,1);


    });


      }

I did all the required imports and it should work if someone can help I would appreciate it very much.

thanks.

Answer 1

好吧，在我在 git 上问它之后，我发现了我的问题，它是：导入 -> MatDialogModule 我希望它会对某人有所帮助，即使只是给出了错误的想法，请查看： https : //github.com/angular /material2/issues/8911

Answer 2

There are two things you need to look out for

1. make sure you import MatDialogModule into the module where you are using the dialog.
2. make sure that the dialog component is added to declaration in your module.

Answer 3

Try this

<button mat-button mat-dialog-close (click)="foo(data.title)" tabindex="2">Ok</button>

instead of

<button mat-button [mat-dialog-close]="data.title" tabindex="2">Ok</button>

it worked for me.

Answer 4

This post should be a comment because does not supplies any answer, but to be clear where we are on this issue, this is from the Angular Material documentation: https://material.angular.io/components/dialog/overview

So your code is correct as stated in Angular Material documentation, where you can find an example but, even the directives "mat-dialog-actions" and "mat-dialog-content" do not work as intended... And yes, the issue is yet opened at github.

Sorry for the frustration after hours of googling and SO'ing with no answer.

Answer 5

If your component is exported in a shared module, you need to have the angular material imports declared in the shared module too.

ex:

 import { NgModule, ModuleWithProviders } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule } from '@angular/material/dialog'; import { ConfirmPopupComponent } from '../confirmPopup/confirmPopup.component'; @NgModule({ declarations: [ ConfirmPopupComponent ], imports: [ MatDialogModule, MatButtonModule ], exports: [ ConfirmPopupComponent ] }) export class SharedModule { }

Answer 6

There is an alternate option,

Dialog HTML

<button mat-button mat-dialog-close (click)="myMethod('result')" cdkFocusInitial>Delete</button>

Dialog-Component.ts

 myMethod(val){ 
    this.dialogRef.close(val);
  }

If you want to return result after dialog closed,

Main-Component.ts

yourMainComponentMethod(\) {
    const dialogRef = this.dialog.open(DialogDelete, {
      width: '350px',
      height: '200px',
      data: { dialogTitle: "Title", dialogText: "You will vote this!"}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      console.log(result);

    });
  }

Answer 7

use [matDialogClose] instead of [mat-dialog-close] . example <button mat-button [matDialogClose]="data.title" cdkFocusInitial> OK </button> . This worked for me.

Answer 8

您还必须确保您的对话框组件在app.module.ts声明

Answer 9

Did you import the MatDialogModule ? For example in your app.module.ts file

import {MatDialogModule} from '@angular/material';

...

@NgModule({

  declarations: [
   ...
  ],

  imports: [
    ...
    MatDialogModule,
  ],