在 angular 材料中調用屬性獲取器

Question

我無法從 angular 材料表中的復選框中獲取值。 我嘗試了許多選項 get，JSON.stringify()，class 與 get，OnChanges 並沒有任何效果！

這是控制台“in this.selection”中的消息：

調用屬性獲取器

並且控制台出現 () parentesis ...當我嘗試得到這個時。 我附上一張img

這是 angular 材料中帶有復選框示例的表格

https://stackblitz.com/angular/krkppqljojv?file=src%2Fapp%2Ftable-selection-example.ts

只有我選擇了復選框，但我有 las 選擇，而不是實際的

我分享，看看

table... init

<ng-container matColumnDef="id">
    <th
      mat-header-cell
      *matHeaderCellDef
    >
      <mat-checkbox
        (change)="$event ? this.masterToggle() : null"
        [checked]="this.selection.hasValue() && this.isAllSelected()"
        [indeterminate]="this.selection.hasValue() && !this.isAllSelected()"
        [aria-label]="this.checkboxLabel()"
        (click)="this.getSelect(selection);"
      >
      </mat-checkbox>
    </th>
    <td
      mat-cell
      *matCellDef="let row"
    >
      <mat-checkbox
        (change)="$event ? this.selection.toggle(row) : null"
        [checked]="this.selection.isSelected(row)"
        [aria-label]="this.checkboxLabel(row)"
        (click)="this.getSelect(row);"
      >
      </mat-checkbox>
    </td>
  </ng-container>



table... end

在這個控制台是我的問題，一些想法？

  getSelect(event: any) {
    console.log(this.selection); // {etc: {...}, selected: (...), _etc:}
    console.log(this.selection.selected); // []
    // this.journeysSelected.emit(this.selection);
  }

如您所見，當控制台日志為 this.selection 時，選擇的屬性有一個屬性，但帶有 (...)，然后我單擊並顯示帶有值的數組。

但是當我控制台記錄 this.selection.selected 時，是 [] 空數組。

請不要把我（-1）=（憐憫

Answer 1

刪除標簽中的點擊事件

<!--select-->
  <ng-container matColumnDef="id">
    <th
      mat-header-cell
      *matHeaderCellDef
    >
      <mat-checkbox
        (change)="$event ? this.masterToggle() : null"
        [checked]="this.selection.hasValue() && this.isAllSelected()"
        [indeterminate]="this.selection.hasValue() && !this.isAllSelected()"
        [aria-label]="this.checkboxLabel()"

      >
      </mat-checkbox>
    </th>
    <td
      mat-cell
      *matCellDef="let row"
    >
      <mat-checkbox
        (change)="$event ? this.selection.toggle(row) : null"
        [checked]="this.selection.isSelected(row)"
        [aria-label]="this.checkboxLabel(row)"

      >
      </mat-checkbox>
    </td>
  </ng-container>

訂閱：

export class JourneyTableComponent implements OnInit {

serv: Subject<any> = new Subject<any>(); // declare the Subject


ngOnInit() {
    this.getValue().pipe(
      distinctUntilChanged(), // important because detectec are many changes
      map(value => this.selectedJourneys = value),
    ).subscribe(value => console.log(this.selectedJourneys)); // made things
}

getValue(): Observable<any> {
    return this.serv.asObservable();
}

setValue(newValue): void {
    this.serv.next(newValue);
}


isAllSelected() {
    const numSelected = this.selection.selected.length;
    this.setValue(this.selection.selected); // set value when you click
    const numRows = this.dataSource.length;
    return numSelected === numRows;
  }


... more code
}

享受