Question

HTML代码 我正在使用反应形式，很好，当用户选中任何复选框，然后单击“组装”按钮时，我想获取选定的值。谁能帮我吗？

<table mat-table [dataSource]="dataSource" fxFill appearance="outline">
 <!-- Checkbox Column -->
 <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox [(ngModel)]="value" 
         (change)="$event ? masterToggle() : null" 
         [checked]="selection.hasValue() && isAllSelected() == true"
         [indeterminate]="selection.hasValue() && !isAllSelected()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()" 
          (change)="$event ? selection.toggle(row) : null" 
          [checked]="selection.isSelected(row) == true">
        </mat-checkbox>
     </td>
     </ng-container>

     <!-- Name Column -->
     <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let dataSource"> {{dataSource.name}} </td>
     </ng-container>

     <!-- Symbol Column -->
     <ng-container matColumnDef="Modified">
         <th mat-header-cell *matHeaderCellDef> Modified </th>
         <td mat-cell *matCellDef="let dataArray"> {{dataArray.modifiedAt}} </td>
     </ng-container>   
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
        (click)="selection.toggle(row)">
      </tr>
</table>
</mat-sidenav-container>
   <mat-dialog-actions align="end">
     <button mat-button (click)="onCancel()">Cancel</button>
     <button mat-button type="submit" (click)="onAssemble()" 
        [disabled]="!assemblyForm.valid"> Assemble
    </button>
</mat-dialog-actions>

Answer 1

*对HTML进行了一些更改*

 <ng-container matColumnDef="select">
              <th mat-header-cell *matHeaderCellDef>
                <mat-checkbox  (change)="$event ? masterToggle($event) : null" [checked]="selection.hasValue() && isAllSelected() == true" [indeterminate]="selection.hasValue() && !isAllSelected()">
                </mat-checkbox>
              </th>
              <td mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectRow($event, row) : null" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row) == true">
                </mat-checkbox>
              </td>
            </ng-container>

，并在.ts文件中添加了一些功能

isAllSelected($event) {

    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }
masterToggle($event) {
    if ($event.checked) {
      this.onCompleteRow(this.dataSource);
    }
    this.isAllSelected($event) ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
  }

 private selectRow($event, dataSource) {
   // console.log($event.checked);
    if ($event.checked) {
      console.log(dataSource.name);
    }
  }

  onCompleteRow(dataSource) {
      dataSource.data.forEach(element => {
        console.log(element.name);
      });
  }

Answer 2

如果要在HTML屏幕中显示输出，只需在HTML代码中添加以下行

{{selection.selected|json}}

要在控制台中查看-

console.log(this.selection.selected)

Answer 3

在您的html中包含以下代码

<mat-checkbox color="primary" 
    [checked]="value[i]"(change)=functionToMaintainCheckedList()>
</mat-checkbox>

在您的功能（TS文件）中

functionToMaintainCheckedList() {
    if (this.value[i]) {
        this.value[i] = false;
        // Splice the value From your array 
    } else {
        //Add that value to your array
        this.value[i] = true;
    }
}

如何以角度获取表中选定的行值？

3 个答案: