Material Design表未映射到UserDataSource

Question

我在UserDataSource中有一个硬编码值,它没有映射到Material Data表.然而,当我将它打印到屏幕上时,我可以看到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

我们可以提供帮助的唯一方法是，如果您将其放在 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">

但如果没有 stackblitz，我无法轻松测试这一点。