Angular 5 Material 데이터 테이블에 서비스가 없습니다.

Question

Material 테이블에 Angular (5)를 사용하여 MySQL 데이터베이스의 데이터를 표시하려고합니다. 코드를 성공적으로 컴파일하고 열 이름과 페이지 매기기 단추가있는 표가 나타나지만 표에 표시된 데이터가 없습니다. API 호출이 데이터를 올바르게 리턴하고 API가 호출하고 있다는 것을 알고 있습니다 (브라우저의 네트워크 관리자에서 올바른 데이터를 볼 수 있음). 오류가 unitTypeDatabase.data.length를 참조하여 HTML 코드의 일부를 참조하는 것으로 생각된다

TypeError: _co.unitTypeDatabase.data is undefined 
Stack trace: 
View_UnitTypeComponent_0/<@ng:///AppModule/UnitTypeComponent.ngfactory.js:136:9 ... 

의 브라우저에 표시된 오류가 있습니다. 이것이 정의되지 않았다면 테이블에 데이터가없는 이유를 설명합니다. 내가 알 수없는 것은 입니다. 이유는 정의되지 않은입니다. 나는 그것이 어떻게/언제/어디서 new UnitTypeDatabase을 만들고 있는지와 관련이 있다고 생각하지만, 서비스가 성공적으로 호출되고 있다면 여기에서 어디로 가야할 지 모르겠습니다. 여기 코드 나는이된다

단위 type.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { UnitType } from './unit-type'; 
import { UnitTypeService } from './unit-type.service'; 
import {DataSource} from '@angular/cdk/collections'; 
import {MdPaginator} from '@angular/material'; 
import {Observable} from 'rxjs/Observable'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

@Component({ 
    selector: 'app-unit-type', 
    templateUrl: './unit-type.component.html', 
    styleUrls: ['./unit-type.component.scss'], 
    providers: [UnitTypeService] 
}) 
export class UnitTypeComponent implements OnInit { 
    public displayedColumns = ['unitTypeID', 'unitTypeName']; 
    public unitTypeDatabase: UnitTypeDatabase | null; 
    public dataSource: UnitTypeDataSource | null; 

    @ViewChild(MdPaginator) paginator: MdPaginator; 

    constructor(private unitTypeService: UnitTypeService) {} 

    ngOnInit() { 
     this.unitTypeDatabase = new UnitTypeDatabase(this.unitTypeService); 
     this.dataSource = new UnitTypeDataSource(this.unitTypeDatabase, this.paginator); 
    } 
} 

export class UnitTypeDataSource extends DataSource<UnitType> { 
    constructor(private _unitTypeDatabase: UnitTypeDatabase, private _paginator: MdPaginator) { 
     super(); 
    } 

    connect(): Observable<UnitType[]> { 
    const displayDataChanges = [ 
     this._unitTypeDatabase.dataChange, 
     this._paginator.page 
    ]; 

    return Observable.merge(...displayDataChanges).map(() => { 
     const data = this._unitTypeDatabase.data.slice(); 

     const startIndex = this._paginator.pageIndex * this._paginator.pageSize; 
     return data.splice(startIndex, this._paginator.pageSize); 
    }) 
    } 

    disconnect() {} 
} 

export class UnitTypeDatabase { 
    /** Stream that emits whenever the data has been modified. */ 
    public dataChange: BehaviorSubject<UnitType[]> = new BehaviorSubject<UnitType[]>([]); 
    get data(): UnitType[] { return this.dataChange.value; } 

    constructor(unitTypeService: UnitTypeService) { 
     unitTypeService.getAllUnitTypes().subscribe(data => this.dataChange.next(data)); 
    } 
} 

단위 type.component.html

<div class="example-container mat-elevation-z8"> 
    <md-table #table [dataSource]="dataSource"> 

    <!-- ID Column --> 
    <ng-container mdColumnDef="unitTypeID"> 
     <md-header-cell *mdHeaderCellDef> ID </md-header-cell> 
     <md-cell *mdCellDef="let row"> {{row.unitTypeID}} </md-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container mdColumnDef="unitTypeName"> 
     <md-header-cell *mdHeaderCellDef> Name </md-header-cell> 
     <md-cell *mdCellDef="let row"> {{row.unitTypeName}} </md-cell> 
    </ng-container> 

    <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row> 
    </md-table> 

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

단위 type.ts

export class UnitType { 
    constructor(
     public unitTypeID: number, 
     public unitTypeName: string 
    ){} 
} 

단위 type.service.ts

import { Injectable } from '@angular/core'; 
import { UnitType } from './unit-type'; 
import { Headers, Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class UnitTypeService { 
    private unit_types_Url = 'api/unit-types'; // URL to web api 
    private headers = new Headers({'Content-Type': 'application/json'}); 

    constructor(private http: Http) { } 

    getAllUnitTypes(): Observable<UnitType[]> { 
    return this.http.get(this.unit_types_Url) 
      .map(response => response.json().data as UnitType[]); 
    } 
} 

이 나는 ​​재료 사이트에서 예제를 시작했지만, 그 서비스를 사용하여 데이터를 검색하지 않습니다. 나는 또한 How to use md-table with services in Angular 4에서 질문과 대답을 시도했지만 뭔가를 놓치고 있어야합니다. 다행히도 누군가가 신속하게 발견 할 수있는 명백하고 단순한 오류 또는 오해입니다. 감사!

편집 전체 스택 추적은 다음과 같습니다

ERROR TypeError: _this._unitTypeDatabase.data is undefined 
Stack trace: 
[208]/UnitTypeDataSource.prototype.connect/<@http://localhost:4200/main.bundle.js:93:17 
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:51417:22 
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13 
OuterSubscriber.prototype.notifyNext@http://localhost:4200/vendor.bundle.js:48573:9 
InnerSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:117362:9 
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13 
Subject.prototype.next@http://localhost:4200/vendor.bundle.js:26457:17 
BehaviorSubject.prototype.next@http://localhost:4200/vendor.bundle.js:49978:9 
UnitTypeDatabase/<@http://localhost:4200/main.bundle.js:122:78 
SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4200/vendor.bundle.js:37363:13 
SafeSubscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37310:17 
Subscriber.prototype._next@http://localhost:4200/vendor.bundle.js:37250:9 
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13 
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:51423:9 
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13 
onLoad@http://localhost:4200/vendor.bundle.js:53409:21 
ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6443:17 
onInvokeTask@http://localhost:4200/vendor.bundle.js:4914:24 
ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6442:17 
Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6242:28 
ZoneTask/this.invoke@http://localhost:4200/polyfills.bundle.js:6496:28 

Answer 1

문제는 unit-type.service.ts에 있습니다. 그것은해야한다 : 나는 반환 된 JSON의 일환으로 데이터 객체가 없다는 사실을 놓친

getAllUnitTypes(): Observable<UnitType[]> { 
    return this.http.get(this.unit_types_Url) 
      .map(response => response.json() as UnitType[]); 
} 

, 그래서 빨리 그 모든 정보를 볼 수 있고 올바르게 표에 표시된 제거한다.

Answer 2

시도로 시작하는 템플릿에 엘비스 연산자 ?를 사용 할 수 있습니다. 템플릿 문제 일 뿐이라면 문제가 해결되어야합니다. 뷰가 ngOnInit() 만에서 초기화되는 아직 정의되지 unitTypeDatabase가없는 렌더링 될 때

[length]="unitTypeDatabase?.data?.length" 

이유이다. 문제가 해결되는지 확인하십시오.