按钮未启动点击事件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中复制这一点，所以它似乎是我的代码特有的，但代码非常直接。我添加了一个新的菜单按钮"；测试"；同样的事情也会发生。我觉得这与CCD_ 6有关，也可能与Angular处理每个"菜单"的多个菜单的方式有关；行"；，或者可能有一个错误发生在我看不到的地方。在Chrome的控制台或VSCode的调试中没有记录错误。

如何解决此问题？

Answer 1

看起来您已经将delete()函数附加到了<mat-icon>元素上，它应该在<button>本身上。