angular - Material 设计表未映射到UserDataSource

我在没有映射到材料数据表的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>

用户数据源

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

公司组件

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) { }
    ....
    }

最佳答案

在Component中，您使用了SelectionModel的coidselected标识符。但在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