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

在您的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。

Answer 2

我们唯一能提供帮助的方法是将其放在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，我无法轻松地进行测试。

Answer 3

问题是您的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 working example

物料设计表未映射到UserDataSource

3 个答案: