在角度材料中调用属性吸气剂

问题描述

我无法从角材料表中的复选框中获取值。 我尝试了很多选择 get,JSON.stringify(),class with get,OnChanges 什么都没用！

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

调用属性getter

并且控制台带有 () parentesis ...当我尝试获取此内容时。 我附上一个img

这是带有角材料复选框示例的表格

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）=（怜悯

解决方法

移除标签中的点击事件

<!--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
}

享受