我想簡單地顯示使用角度(5)與材料表的MySQL數據庫中的數據。我已成功編譯的代碼,並出現一個包含列名和分頁按鈕的表,但表中沒有顯示數據。我知道API調用正確返回數據,並且我知道該服務正在調用API(我可以在瀏覽器中的網絡檢查器中看到正確的數據)。有一個在角度5材料表沒有從服務獲取數據
TypeError: _co.unitTypeDatabase.data is undefined
Stack trace:
View_UnitTypeComponent_0/<@ng:///AppModule/UnitTypeComponent.ngfactory.js:136:9 ...
這樣看來,錯誤指的是在HTML代碼中提到unitTypeDatabase.data.length部分瀏覽器中顯示一個錯誤。如果這是未定義的,那麼它可以解釋爲什麼表中沒有數據。我不明白的是爲什麼這是未定義的。我認爲這與我在創建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
[email protected]://localhost:4200/vendor.bundle.js:51417:22
[email protected]://localhost:4200/vendor.bundle.js:37214:13
[email protected]://localhost:4200/vendor.bundle.js:48573:9
[email protected]://localhost:4200/vendor.bundle.js:117362:9
[email protected]://localhost:4200/vendor.bundle.js:37214:13
[email protected]://localhost:4200/vendor.bundle.js:26457:17
[email protected]://localhost:4200/vendor.bundle.js:49978:9
UnitTypeDatabase/<@http://localhost:4200/main.bundle.js:122:78
[email protected]://localhost:4200/vendor.bundle.js:37363:13
[email protected]://localhost:4200/vendor.bundle.js:37310:17
[email protected]://localhost:4200/vendor.bundle.js:37250:9
[email protected]://localhost:4200/vendor.bundle.js:37214:13
[email protected]://localhost:4200/vendor.bundle.js:51423:9
[email protected]://localhost:4200/vendor.bundle.js:37214:13
[email protected]://localhost:4200/vendor.bundle.js:53409:21
[email protected]://localhost:4200/polyfills.bundle.js:6443:17
[email protected]://localhost:4200/vendor.bundle.js:4914:24
[email protected]://localhost:4200/polyfills.bundle.js:6442:17
[email protected]://localhost:4200/polyfills.bundle.js:6242:28
ZoneTask/[email protected]://localhost:4200/polyfills.bundle.js:6496:28
感謝您的提示,但不幸的是,並沒有解決問題。和以前一樣,我仍然在瀏覽器中看到相同的錯誤。 – Tim
可以顯示錯誤的完整堆棧跟蹤嗎? – amal
我編輯了問題以顯示完整的堆棧跟蹤。 – Tim