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

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

解决方案：将 .html 模板中的 form.controls.credentials?.value 替换为 form.get('credentials').controls 即可解决问题。之后，垫子按钮再次在 *ngFor 中工作。