angular - 如何停用垫选择事件？

Question

因为我有一个 mat-select 作为表格，所以我需要停用单击一行时触发的事件。

我需要只检查复选框而不触发列上的选择。

示例：如果您看到Qty带有阴影背景的行，则我单击了该AVG列中的复选框。由于“行事件”，Qty将自动选择。当我按下另一个复选框（用于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 类以使代码更具可读性。

我知道[(ngModel)]from selection 不好，因为这会覆盖这些值，但这不是现在的问题所在。

如何仅在第一列而不是整行上触发 select 事件？或者......可以使用选择下拉菜单来完成吗？因为，如果没有，我需要将它从一个 mat-select 转换为一个带有表格的弹出窗口。

谢谢

标签： angulartypescriptselectdom-events

Answer 1

谢谢@prashant你的回答。不幸的是，这不起作用。但是，我找到了另一个解决方案，我不确定这是否会产生 html 验证警告，因为我在 a 中使用了非特定标签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>