以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函數的方式！