角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」でそれをスペルミス。ああ...