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

Question

当我尝试遵循https://material.angular.io/components/dialog/overview 中的对话教程时发生了这种情况，并且我收到了上面的错误，所以如果有人知道我应该怎么做来解决这个问题?

这是我的代码：模态的 html

<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>

激活模态的类：

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


    });


      }

我做了所有必需的导入，如果有人可以提供帮助，它应该可以工作，我将不胜感激。

谢谢。

Answer 1

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

Answer 2

有两件事你需要注意

1. 确保将MatDialogModule导入到使用对话框的模块中。
2. 确保将对话框组件添加到模块中的声明中。

Answer 3

试试这个

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

代替

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

它对我有用。

Answer 4

这篇文章应该是评论，因为没有提供任何答案，但要清楚我们在这个问题上的位置，这是来自 Angular Material 文档： https : //material.angular.io/components/dialog/overview

因此，您的代码如 Angular Material 文档中所述是正确的，您可以在其中找到示例，但是，即使指令“mat-dialog-actions”和“mat-dialog-content”也无法按预期工作......是的，问题尚未在 github 上打开。

很抱歉在经过数小时的谷歌搜索和没有答案的情况下感到沮丧。

Answer 5

如果您的组件在共享模块中导出，则您还需要在共享模块中声明角度材料导入。

前任：

 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

有一个替代选项，

对话框 HTML

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

Dialog-Component.ts

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

如果您想在对话框关闭后返回结果，

主组件.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

使用[matDialogClose]而不是[mat-dialog-close] 。 示例<button mat-button [matDialogClose]="data.title" cdkFocusInitial> OK </button> 。 这对我有用。

Answer 8

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

Answer 9

你导入了 MatDialogModule 吗？ 例如在您的 app.module.ts 文件中

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

...

@NgModule({

  declarations: [
   ...
  ],

  imports: [
    ...
    MatDialogModule,
  ],