angular - 如何操作表格内的角度材料复选框

问题描述

所以我在这里使用角度材料 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 数组中。并且复选框继续显示为选中状态。

任何帮助将不胜感激。

标签： angulartypescriptangular5angular-material-5

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

像这样

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

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

event.source.checked = false;

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

angular - 如何操作表格内的角度材料复选框

问题描述

解决方案

推荐阅读