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>

它对我有用。