角4材料表不會填充

Question

我正試圖在角4中實現一個接收來自服務調用的數據的材料設計表。無論我嘗試什麼，即使我的服務正在正確返回數據，我也無法讓表填充。我在控制檯中沒有收到任何錯誤。看起來，數據源中的connect（）函數永遠不會被調用（就像我放在任何地方的跟蹤一樣），因此我的數據源始終是空的。我正在運行版本2.0.0-beta.12中的素材。 我確實讀過以前版本的資料中存在錯誤，這就是爲什麼我將調用包含到「this._changeDetector.detectChanges（）;」在我的組件ngOnInit中，但它沒有幫助。我還讀了How to use md-table with services in Angular 4的問題並實施了這些建議。

通過官方文檔和大量線程的尋找後，這裏是我想出了代碼：

role.component.ts

import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core'; 
import { MatPaginator } from '@angular/material';  
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { DataSource } from '@angular/cdk/table'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 
import { RoleService } from '../shared/services/role/role.service'; 
import { Role } from '../shared/classes/role'; 

@Component({ 
    selector: 'app-roles', 
    templateUrl: './role.component.html', 
    styleUrls: ['./role.component.css'] 
}) 
export class RoleComponent implements OnInit { 
    public displayedColumns = ['role_name', 'tech_stack']; 
    public roleDatabase = new RoleDatabase(this._roleService); 
    public roleDatasource: RoleDatasource | null; 

    @ViewChild(MatPaginator) paginator: MatPaginator; 

    constructor(private _roleService: RoleService, private _changeDetector: ChangeDetectorRef) { } 

    ngOnInit() { 
    this.roleDatasource = new RoleDatasource(this.roleDatabase, this.paginator); 
    this._changeDetector.detectChanges(); 
    } 

} 

export class RoleDatabase { 
    dataChange: BehaviorSubject<Role[]> = new BehaviorSubject<Role[]>([]); 
    get data(): Role[] { return this.dataChange.value; } 

    constructor(private _roleService: RoleService) { 
     this.getAllRoles(); 
    } 

    getAllRoles() { 
     this._roleService.getRoles().subscribe(response => { 
      this.dataChange.next(response); 
     }); 
    } 
} 

export class RoleDatasource extends DataSource<any> { 

    constructor(private _roleDatabase: RoleDatabase, private _paginator: MatPaginator) { 
    super(); 
    } 

    connect(): Observable<Role[]> { 

    const displayDataChanges = [ 
     this._roleDatabase.dataChange, 
     this._paginator.page 
    ]; 

    return Observable.merge(...displayDataChanges).map(() => { 
     const data = this._roleDatabase.data.slice(); 
     const startIndex = this._paginator.pageIndex * this._paginator.pageSize; 
     return data.splice(startIndex, this._paginator.pageSize); 
    }) 
    } 

    disconnect() { } 
} 

role.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response, URLSearchParams, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/catch'; 

import { Role } from '../../classes/role'; 

@Injectable() 
export class RoleService { 

    private rolesHeaderUrl = '/local/roles'; 

    constructor(private http: Http) { } 

    getRoles(): Observable<Role[]> { 
    return this.http.get(this.rolesHeaderUrl) 
     .map(response => response.json() as Role[]) 
     .catch(this.getError); 
    } 

    private getError(error: Response): Observable<any>{ 
    return Observable.throw(error.json() || 'Server Issue'); 
    } 

} 

最後是role.component.html：（！希望）

<mat-card class="title-card"> 
    <mat-card-title class="page-title">Roles</mat-card-title> 
</mat-card> 

<mat-card> 

    <mat-table #roletable [dataSource]="roleDataSource"> 

    <ng-container matColumnDef="role_name"> 
     <mat-header-cell *matHeaderCellDef> Role Name </mat-header-cell> 
     <mat-cell *matCellDef="let role"> {{role.role_name}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="tech_stack"> 
     <mat-header-cell *matHeaderCellDef> Technical Stack </mat-header-cell> 
     <mat-cell *matCellDef="let role"> {{role.tech_stack}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 

    </mat-table> 

    <mat-paginator #paginator 
    [length]="roleDatabase.data.length" 
    [pageIndex]="0" 
    [pageSize]="25" 
    [pageSizeOptions]="[5, 10, 25, 100]"> 
    </mat-paginator> 

</mat-card> 

我必須失去了在這一點......一些東西很明顯，如果有人可以只找到它！

感謝您的幫助！

DDA

Answer 1

我解決我的問題，這的確是一個明顯的錯誤......我的數據源變量被命名爲「roleDatasource」但我拼錯它在html「roleDataSource」。哦，好吧......