如何操作表格内的角度材料复选框答案

【问题标题】：How to manipulate angular materials checkbox inside a table如何操作表格内的角度材料复选框
【发布时间】：2021-01-31 09:22:06
【问题描述】：

所以我在这里使用 Angular Materials 5 表格和复选框，基本上逐字逐句设置。它是表格具有选择复选框的示例。 https://v5.material.angular.io/components/table/api。我想要实现的是当用户点击一行时，检查它是否有效。如果它无效，请不要将其放入选择列表并取消选中该行。

我目前能够阻止它被插入到选择列表中，但复选框仍处于选中状态。我正在尝试找到一种方法来在用户单击后取消选中或阻止它一起检查。相关代码如下。

HTML：

   <div class="row tm3 bm3">
          <div class="example-container mat-elevation-z8 tm1" style="width:100%">
            <div class="example-header text-right">
              <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter Search">
              </mat-form-field>
            </div>
            <mat-table *ngIf="dataSource" #table [dataSource]="dataSource" matSort>

              <!-- Weight Column -->
              <ng-container matColumnDef="select">
                <mat-header-cell *matHeaderCellDef>
                  <mat-checkbox (change)="$event ? masterToggle() : null"
                                [checked]="selection.hasValue() && isAllSelected()"
                                [indeterminate]="selection.hasValue() && !isAllSelected()">
                  </mat-checkbox>
                </mat-header-cell>
                <mat-cell  *matCellDef="let row">
                  <mat-checkbox (click)="$event.stopPropagation()"
                                (change)="selectRow(row)"
                                [checked]="selection.isSelected(row)"
                                [disabled]="row.IsError||row.IsActivated">
                  </mat-checkbox>
                </mat-cell>
              </ng-container>
   <mat-header-row class="" *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            </mat-table>

            <!--<mat-paginator #paginator
                     [pageSize]="10"
                     [pageSizeOptions]="[5, 10, 20]"
                     [showFirstLastButtons]="true">
      </mat-paginator>-->

          </div>

        </div>

打字稿：

  public selectRow(data) {
    var valid = this.checkLimits(data);
    if (valid) {
      this.selection.toggle(data);
      //code stuff
    } 
else{
        this.alertService.error("Error Message"); 
     } 


  }

不应选中此复选框，但行数据不在 this.selection 数组中。并且复选框继续显示为选中状态。

任何帮助将不胜感激。

【问题讨论】：

标签： angular typescript angular5 angular-material-5

【解决方案1】：

所以我想通了。在我更改的复选框属性上，我需要传递 $event 和我的行信息。

像这样

(change)="selectRow($event,row)"

然后在我的打字稿方法中，我必须访问 angularMaterials 属性

event.source.checked = false;

这实现了我的目标，即不选中复选框并且它也不在“this.selected”数组中。

【讨论】：