Таблица конструирования материала не сопоставляется с UserDataSource

Question

У меня есть жестко закодированное значение в UserDataSource, которое не отображается в таблицу данных материала.Тем не менее, я вижу json, когда я печатаю его на экране ... Что мне не хватает?

ОБНОВЛЕНИЕ: я обнаружил, что таблица заполняется нормально, когда убирается столбец флажка ... Любые идеичто не так с этим столбцом?

DATA: {{dataSource.data | json}}
<mat-table class="lessons-table mat-elevation-z8 overflow-x-auto" [dataSource]="dataSource">

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
    <mat-spinner></mat-spinner>
</div>

<!-- Checkbox Column -->
<ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [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)">
        </mat-checkbox>
    </td>
</ng-container>
<!-- end checkbox column -->
<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let e">tempName</mat-cell>
</ng-container>

<ng-container matColumnDef="twodigitcoid">
    <mat-header-cell *matHeaderCellDef>Two digit coid</mat-header-cell>
    <mat-cell *matCellDef="let e">removeme</mat-cell>
</ng-container>

<ng-container matColumnDef="awscoid">
    <mat-header-cell *matHeaderCellDef>AWS coid</mat-header-cell>
    <mat-cell *matCellDef="let e">{{e.awsCoId}}</mat-cell>
</ng-container>

<ng-container matColumnDef="paiosLic">
    <mat-header-cell *matHeaderCellDef>PAIOS Lic In Use</mat-header-cell>
    <mat-cell *matCellDef="let e">{{e.paiosLicCount}}</mat-cell>
</ng-container>
<ng-container matColumnDef="paiosLicSupport">
    <mat-header-cell *matHeaderCellDef>PAIOS Support Lic In Use</mat-header-cell>
    <mat-cell *matCellDef="let e">{{e.paiosSupportCount}}</mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>

UserDataSource

export class UserDataSource implements DataSource<Company> {

private CompanyModelsSubject = new BehaviorSubject<Company[]>([]);//emits values to the view
private loadingSubject = new BehaviorSubject<boolean>(false);
public loading$ = this.loadingSubject.asObservable();
get data() { return this.CompanyModelsSubject.value; }

constructor(private svc: GreencardService) {}

//lets you subscribe to the data stream
connect(collectionViewer: CollectionViewer): Observable<Company[]> {
    console.log('datasource connected')
    return this.CompanyModelsSubject.asObservable();
}

disconnect(collectionViewer: CollectionViewer): void {
    this.CompanyModelsSubject.complete();
    this.loadingSubject.complete();
}

//called in response to user actions- changes data steam that you connected to using connect()
loadData(lgid) {

    //hardcoded test
    this.loadingSubject.next(true); //also sets loading$ to true
    let com: Company[] = [new Company({ awsCoId: 1038 })];
    this.CompanyModelsSubject.next(com);
    this.loadingSubject.next(false);
    //end hardcoded test
}}

CompanyComponent

export class CompanyComponent{

    dataSource: UserDataSource;
    displayedColumns = ["select", "name",/*"twodigitcoid",*/ "awscoid","paiosLic","paiosLicSupport"];

    @Input() set lgid(value: number) {
        console.log('------\ncompanytable: ' + value);
        if (this.dataSource==undefined)
            this.dataSource = new UserDataSource(this.svc);
        this.dataSource.loadData(value);
    }
    @Output() coIdSelected= new SelectionModel<Company>(true, [],true);


    constructor(private svc: GreencardService) { }
    ....
    }

Answer 1

Проблема в том, что ваш selection объект и isAllSelected функция, вы используете их в чекбоксе, но никогда не определяете их, поэтому определение их в вашем компоненте должно решить вашу проблему примерно так:

selection:any={
  hasValue:()=>{
    return true;//replace with your own logic
  },
  isSelected:()=>{
    return true;//replace with your own logic
  }

  };
  isAllSelected=()=>{
    return true;//replace with your own logic
  }

Stackbliz рабочий пример

Answer 2

В вашем Component вы использовали coIdSelected идентификатор для SelectionModel.Но в View вы использовали выбор идентификатор.Определите выделение как показано ниже внутри вашего Component.

this.selection = new SelectionModel<Company>(true, []);

Вы не опубликовали свой полный код CompanyComponent.Если вы не определили функции masterToggle() и isAllSelected(), определите их, как показано ниже, в вашей CompanyComponent

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

StackBlitz Demo .

Answer 3

Единственный способ, которым мы можем помочь, - это если вы либо поместите это в stackblitz или аналогичное, чтобы мы могли увидеть его выполнение, либо вы создадите меньший пример и протестируете его там.Глядя на это, я могу только догадываться, что проблема здесь:

DATA: {{dataSource.data | json}}
<mat-table class="lessons-table mat-elevation-z8 overflow-x-auto" [dataSource]="dataSource">

должно быть

DATA: {{dataSource.data | json}}
<mat-table class="lessons-table mat-elevation-z8 overflow-x-auto" [dataSource]="dataSource.data">

, но у меня нет способа легко проверить это без стекаблиц.