Как получить выбранные значения строки в таблице в угловых? - PullRequest
Новая
       15

Как получить выбранные значения строки в таблице в угловых?

0 голосов
/ 11 октября 2018

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>

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

* Внесены некоторые изменения в 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);
      });
  }
0 голосов
/ 11 октября 2018

Включите следующий код в ваш 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;
    }
}
...