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可以解决问题。之后，mat按钮再次在* ngFor内部起作用。

Angular中的* ngFor和MatDialog问题

1 个答案: