按钮未触发单击事件Angular 14.1

Question

我有一个 Angular Material 14.1 mat-dialog 弹出窗口，允许用户编辑电话号码列表。由于电话号码列表可能是 0 位，我有一个 FormArray，其中每个电话号码都有自己的 FormGroup 属性（号码、类型、姓名等）。然后将此FormArray 分配给处理该电话号码编辑的组件：

    <ng-container formArrayName="phoneNumbers">
        <app-phone-edit *ngFor="let item of phoneNumbers.controls; index as i" (deletePhoneNumber)="deletePhone(i)"
            [formGroup]="phoneNumberFormGroup(i)"></app-phone-edit>
    </ng-container>

这个组件有一个菜单图标，其中一个选项是“删除电话号码”，它发出上面代码响应的事件。

<!-- Phone Edit Component -->
    <mat-form-field>
        <input matInput mask="0000 000 000" formControlName="phoneNumber" placeholder="Phone Number">
    </mat-form-field>
    <button mat-menu-item>
        <mat-icon aria-label="Delete Phone Number" (click)="delete()">delete</mat-icon>
        Delete Number
    </button>

在这个组件后面的 Typescript 文件中，目前只是将删除事件记录到控制台，进行测试，然后发出事件：

delete(): void {
    console.log('Delete in Phone Component', this.formGroup);
    this.deletePhoneNumber.emit();
}

问题是，该按钮有时只能工作。我可以点击“删除”10次，它只会调用一次函数后面的代码，也许是第三次尝试，也许是第一次，也许根本没有。我已经在调试中运行代码并且没有错误。我在delete()方法上设置了断点，而且很少被调用。

我似乎无法在 Stack Blitz 中复制它，所以它似乎是我的代码特有的，但代码非常简单。我添加了一个新的菜单按钮“测试”，同样的事情发生了。我觉得这与FormArray 有关，并且可能与 Angular 为每个“行”处理多个菜单的方式有关，或者可能在我看不到的地方发生错误。在 Chrome 的控制台或 VSCode 的调试中没有记录错误。

我该如何解决这个问题？

Answer 1

您似乎已将delete() 函数附加到<mat-icon> 元素，但它应该在<button> 本身上。