以mat-table角度2显示数据

Question

当我在存储mat-cards显示数据时，代码可以正常工作，这意味着我可以正确获取数据。 但是，当我尝试在mat-tables显示它时，出现索引错误。 我也matTableDataSource ， DataSource ， CdkTableModule和MatTableModule 。

Component.ts

export class DriversComponent {
constructor(private webService : WebService, private route: ActivatedRoute, private auth: AuthService) {}
ngOnInit(){
    var name = this.route.snapshot.params['name'];
    this.webService.getDrivers(name);
    this.webService.getUser().subscribe();
    let dataSource = this.webService.getDrivers(name);
    let displayedColumns = ['id','name','lastname'];
}

Component.html

<div *ngFor="let driver of webService.drivers | async">
    <mat-table #table [dataSource]="dataSource" [@movePanel]='state'>
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
            <mat-cell *matCellDef="let lesson">{{driver.employeeId}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
            <mat-cell *matCellDef="let lesson">{{driver.firstName}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="lastname">
            <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
            <mat-cell *matCellDef="let lesson">{{driver.lastName}}</mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
    </mat-table>
</div>

webservice.ts

private driverStore = [];
private driverSubjet = new Subject();
drivers = this.driverSubjet.asObservable();
constructor(private http: Http, private sb: MatSnackBar, private auth: AuthService) {
    this.getDrivers('');
}
getDrivers(user) {
    user = (user) ? '/history/' + user : '';
    this.http.get(this.BASE_URL + '/employee' + user).subscribe(response => {
        this.driverStore = response.json();
        this.driverSubjet.next(this.driverStore);
    }, error => {
        this.handleError("Unable to get drivers");
    });
}

Answer 1

而不是使用的driver变量从*ngFor指令，用lesson变量从*matCellDef

    <mat-table #table [dataSource]="dataSource" [@movePanel]='state'>
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
            <mat-cell *matCellDef="let lesson">{{lesson.employeeId}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
            <mat-cell *matCellDef="let lesson">{{lesson.firstName}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="lastname">
            <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
            <mat-cell *matCellDef="let lesson">{{lesson.lastName}}</mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
    </mat-table>

您可能根本不需要*ngFor ，因为mat-table将为您显示数据，而您只需要提供数据源即可。

请注意，由于未返回任何内容，因此可能需要更改实现getDrivers函数的方式！