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

提前致谢

解决方案 : 使用 trackBy 在 *ngFor 循环中

Answer 1

我过去也遇到过这个问题。也许这会有所帮助:
Mat-Button click inside a *ngFor with let index = index does not react/fire action

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.