如何停用 mat-select 事件？

Question

因为我有一个 mat-select 更像是 table，我需要停用单击一行时触发的事件。

我需要在不触发列上的 selection 的情况下仅选中复选框。

示例：如果您看到 Qty 行有阴影背景，我在 AVG 列中单击了复选框。由于“行事件”，Qty 将自动 selected。当我按下另一个复选框（对于 SUM 或 AVG 列）时，Qty 将再次触发并切换它。

一些可以提供帮助的代码：

<mat-select  [formControl]="selectedMeasure" multiple>
  <mat-option disabled>
    <div class="option-measure">
      <span>Column</span>
      <span>SUM</span>
      <span>AVG</span>
      <span>COUNT</span>
      <span>DISTINCT</span>
    </div>
  </mat-option>
  <mat-option *ngFor="let measure of measureCols" [value]="measure">
    <div class="option-measure">
       <span>{{measure.name}}</span>
       <div>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="sum"></mat-checkbox>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="avg"></mat-checkbox>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="count"></mat-checkbox>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="distinct"></mat-checkbox>
       </div>
    </div>
  </mat-option>
</mat-select>

我删除了 css 类以使代码更具可读性。

我知道 selections 中的 [(ngModel)] 不行，因为这会覆盖值，但这不是现在的问题所在。

如何只在第一列而不是整行触发 select 事件？或者...可以使用 select 下拉菜单来完成吗？因为，如果没有，我需要将它从 mat-select 转换为带有 table.

的弹出窗口

谢谢

Answer 1

在你这排处理点击事件，停止传播；

(click) = stopPropagation($event)

在component.ts中：

stopPropagation(event)    {
 event.stopPropagtion():
 event.preventDefault();
}

Answer 2

感谢 @prashant 的回答。不幸的是，这不起作用。但是，我找到了另一个解决方案，我不确定这是否会产生 html 验证警告，因为我在 select:

中使用了不明确的标签

<mat-select #measureSelect [formControl]="selectedMeasure" 
   class="select-btn" multiple 
   placeholder="Add">
   <div class="option-measure" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="0">
      <span class="col-header">Column</span>
      <span class="header">SUM</span>
      <span class="header">AVG</span>
      <span class="header">COUNT</span>
      <span class="header">COUNT DISTINCT</span>
   </div>
   <div *ngFor="let measure of measures"
       class="option-measure" 
       fxLayout="row" 
       fxLayoutAlign="start center" 
       fxLayoutGap="0">
       <mat-option [value]="measure"
           class="option-measure__label">
           {{measure.label}}
       </mat-option>
    ...
</mat-select>

如何停用 mat-select 事件？

How to deactivate mat-select event?

select

dom-events

typescript

angular