Angular 中 *ngFor 和 MatDialog 的问题

Question

我目前正在建设一个 Angular 网站。我使用 *ngFor 循环创建了几个组件。创建的每个组件都有一个鼠标事件，应使用该鼠标事件打开 MatDialog (MatDialog)。问题是对话框无法正常打开并且里面的按钮不起作用。但是，只要我删除 *ngFor 循环并只表示第一个元素，对话框就会完美运行。有谁知道这个问题以及如何解决它或 *ngFor 循环的替代方法？

不起作用：

<div *ngFor="let item of elements">
       <div (mousedown)="openMatDialog($event)" class="title">{{item.title}}</div>
</div>

是否起作用：

<div>
    <div (mousedown)="openMatDialog($event)" class="title">{{elements[0].title}}</div>
</div>

函数 openMatDialog(e):

openMatDialog(e) {
    const matDialog = this.dialog.open(
        SettingsDialogComponent, { hasBackdrop: true }
    );
}

提前致谢

解决方案：在*ngFor循环

中使用trackBy

Answer 1

我以前也遇到过这个问题。也许这会有所帮助：

The solution: Replace the form.controls.credentials?.value to form.get('credentials').controls in the .html template does the trick. After that the mat-buttons are working inside the *ngFor again.

Angular 中 *ngFor 和 MatDialog 的问题

Problems with *ngFor and MatDialog in Angular

angular

angular-material

ngfor