小编Joh*_*ann的帖子

我有一个表单字段，其中包含一个选择和右侧的按钮。这个想法是用户可以单击“添加”按钮将选项添加到选择中。问题是，当单击“添加”按钮时，它将打开我的对话框和选择选项，并且选择选项覆盖我的对话框。我只想在单击“添加”按钮时打开对话框。如何抑制选择打开？

<form>
  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <mat-select #mySelect>
      <mat-option>Cat</mat-option>
      <mat-option>Dog</mat-option>
      <mat-option>Bird</mat-option>
    </mat-select>
      <button mat-buttons matSuffix mat-stroked-button aria-label="add" (click)="mySelect.close(); alert('open a dialog')">
        <mat-icon>add</mat-icon>
    </button>
  </mat-form-field>
</form>

以下示例显示单击按钮会打开选择，但实际上不应该这样做？

StackBlitz 示例

--编辑-- @jal_a 在评论中提供了答案。解决方案是添加 event.stopPropagation()

<button mat-buttons matSuffix mat-stroked-button aria-label="add" (click)="$event.stopPropagation(); alert('open a dialog')">

Stackblitz - 已修复