Angular 2 undefined屬性this.logbooks

Question

我正在學習Angular 2，我正在自己製作應用程序。我正在使用InMemoryWebApiModule來模擬API。我正在從角色網站上的「英雄之旅」教程中學習。雖然我的代碼對我來說看起來是一樣的，但它並不像它應該的那樣工作。

不知何故this.logbooks沒有設置。我錯過了什麼？

//in-memory-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api'; 
export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
     let user = {"id":9,"username":"admin"}; 
     let logbooks = [ 
      {"id":1,"name":"1Naam"}, 
      {"id":2,"name":"2Naam"} 
     ]; 
     return {user,logbooks}; 
    } 
} 

//logbooks.component.ts

import {Component, OnInit} from '@angular/core'; 
import {LogbookService} from './logbook.service'; 
import {Logbook} from "./logbook"; 

@Component({ 
    selector: 'logbooks', 
    template: ` 
     <h2>Your logbooks</h2> 
     <ul *ngFor="let logbook of logbooks" class="logbooks"> 
      <li>Name: {{ logbook.name }}</li> 
     </ul> 

     `, 
    providers: [LogbookService] 
}) 

export class LogbooksComponent implements OnInit { 
    logbooks: Logbook[] 

    constructor(private logbookService: LogbookService) { 
    } 

    ngOnInit(): void { 
     console.log('in Lifecycle hook! Yeah!'); 
     this.getLogbooks(); 
     console.log("Den logbooks" + this.logbooks[1].name); 
    } 

    getLogbooks(): void { 
     this.logbookService.getLogbooks().then(logbooks => this.logbooks = logbooks); 
    } 
} 

//logbook.service.ts

import {Logbook} from "./logbook"; 
import 'rxjs/add/operator/toPromise'; 
import {Injectable} from "@angular/core"; 
import {Http} from "@angular/http"; 

@Injectable() 
export class LogbookService { 
    getLogbooks() : Promise<Logbook[]> { 
     return this.http.get(this.logbooksrUrl) 
      .toPromise() 
      .then(response => response.json().data as Logbook[]) 
      .catch(this.handleError); 
    } 
    private logbooksrUrl = 'app/logbooks'; // URL to web api 

    constructor(private http: Http) { } 

    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 
} 

開發者控制檯中的輸出

[WDS] Disconnected! main.bundle.js:44082:10 
in Lifecycle hook! Yeah! main.bundle.js:55753:9 
EXCEPTION: Error in ./AppComponent class AppComponent - inline template:6:0 caused by: this.logbooks is undefined main.bundle.js:36969:9 
ORIGINAL EXCEPTION: this.logbooks is undefined main.bundle.js:36971:13 
ORIGINAL STACKTRACE: main.bundle.js:36974:13 
LogbooksComponent</LogbooksComponent.prototype.ngOnInit@http://localhost:4200/main.bundle.js:55755:9 
anonymous/Wrapper_LogbooksComponent.prototype.ngDoCheck@/AppModule/LogbooksComponent/wrapper.ngfactory.js:20:40 
anonymous/View_AppComponent0.prototype.detectChangesInternal@/AppModule/AppComponent/component.ngfactory.js:86:3 
AppView</AppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52693:9 
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52786:13 
anonymous/View_AppComponent_Host0.prototype.detectChangesInternal@/AppModule/AppComponent/host.ngfactory.js:27:3 
AppView</AppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52693:9 
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52786:13 
ViewRef_</ViewRef_.prototype.detectChanges@http://localhost:4200/main.bundle.js:37861:9 
ApplicationRef_</ApplicationRef_.prototype.tick/<@http://localhost:4200/main.bundle.js:23642:75 
ApplicationRef_</ApplicationRef_.prototype.tick@http://localhost:4200/main.bundle.js:23642:13 
ApplicationRef_</ApplicationRef_.prototype._loadComponent@http://localhost:4200/main.bundle.js:23620:9 
ApplicationRef_</ApplicationRef_.prototype.bootstrap@http://localhost:4200/main.bundle.js:23611:9 
PlatformRef_</PlatformRef_.prototype._moduleDoBootstrap/<@http://localhost:4200/main.bundle.js:23513:82 
PlatformRef_</PlatformRef_.prototype._moduleDoBootstrap@http://localhost:4200/main.bundle.js:23513:13 
PlatformRef_</PlatformRef_.prototype._bootstrapModuleFactoryWithZone/</</<@http://localhost:4200/main.bundle.js:23481:21 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64628:17 
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:25787:28 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64627:17 
Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:64510:24 
scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:64898:52 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64661:21 
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:25778:28 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64660:21 
Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:64550:28 
drainMicroTaskQueue@http://localhost:4200/main.bundle.js:64797:25 
    main.bundle.js:36975:13 
ERROR CONTEXT: main.bundle.js:36978:13 
Object { _view: Object, _nodeIndex: 8, _tplRow: 6, _tplCol: 0 } main.bundle.js:36979:13 
Unhandled Promise rejection: Error in ./AppComponent class AppComponent - inline template:6:0 caused by: this.logbooks is undefined ; Zone: <root> ; Task: Promise.then ; Value: Object { _nativeError: Error, originalError: TypeError, context: Object, stack: "" } LogbooksComponent</LogbooksComponent.prototype.ngOnInit@http://localhost:4200/main.bundle.js:55755:9 
anonymous/Wrapper_LogbooksComponent.prototype.ngDoCheck@/AppModule/LogbooksComponent/wrapper.ngfactory.js:20:40 
anonymous/View_AppComponent0.prototype.detectChangesInternal@/AppModule/AppComponent/component.ngfactory.js:86:3 
AppView</AppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52693:9 
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52786:13 
anonymous/View_AppComponent_Host0.prototype.detectChangesInternal@/AppModule/AppComponent/host.ngfactory.js:27:3 
AppView</AppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52693:9 
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52786:13 
ViewRef_</ViewRef_.prototype.detectChanges@http://localhost:4200/main.bundle.js:37861:9 
ApplicationRef_</ApplicationRef_.prototype.tick/<@http://localhost:4200/main.bundle.js:23642:75 
ApplicationRef_</ApplicationRef_.prototype.tick@http://localhost:4200/main.bundle.js:23642:13 
ApplicationRef_</ApplicationRef_.prototype._loadComponent@http://localhost:4200/main.bundle.js:23620:9 
ApplicationRef_</ApplicationRef_.prototype.bootstrap@http://localhost:4200/main.bundle.js:23611:9 
PlatformRef_</PlatformRef_.prototype._moduleDoBootstrap/<@http://localhost:4200/main.bundle.js:23513:82 
PlatformRef_</PlatformRef_.prototype._moduleDoBootstrap@http://localhost:4200/main.bundle.js:23513:13 
PlatformRef_</PlatformRef_.prototype._bootstrapModuleFactoryWithZone/</</<@http://localhost:4200/main.bundle.js:23481:21 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64628:17 
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:25787:28 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64627:17 
Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:64510:24 
scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:64898:52 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64661:21 
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:25778:28 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64660:21 
Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:64550:28 
drainMicroTaskQueue@http://localhost:4200/main.bundle.js:64797:25 
    main.bundle.js:64784:13 
Error: Uncaught (in promise): Error: Error in ./AppComponent class AppComponent - inline template:6:0 caused by: this.logbooks is undefined 
LogbooksComponent</LogbooksComponent.prototype.ngOnInit@http://localhost:4200/main.bundle.js:55755:9 
anonymous/Wrapper_LogbooksComponent.prototype.ngDoCheck@/AppModule/LogbooksComponent/wrapper.ngfactory.js:20:40 
anonymous/View_AppComponent0.prototype.detectChangesInternal@/AppModule/AppComponent/component.ngfactory.js:86:3 
AppView</AppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52693:9 
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52786:13 
anonymous/View_AppComponent_Host0.prototype.detectChangesInternal@/AppModule/AppComponent/host.ngfactory.js:27:3 
AppView</AppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52693:9 
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:4200/main.bundle.js:52786:13 
ViewRef_</ViewRef_.prototype.detectChanges@http://localhost:4200/main.bundle.js:37861:9 
ApplicationRef_</ApplicationRef_.prototype.tick/<@http://localhost:4200/main.bundle.js:23642:75 
ApplicationRef_</ApplicationRef_.prototype.tick@http://localhost:4200/main.bundle.js:23642:13 
ApplicationRef_</ApplicationRef_.prototype._loadComponent@http://localhost:4200/main.bundle.js:23620:9 
ApplicationRef_</ApplicationRef_.prototype.bootstrap@http://localhost:4200/main.bundle.js:23611:9 
PlatformRef_</PlatformRef_.prototype._moduleDoBootstrap/<@http://localhost:4200/main.bundle.js:23513:82 
PlatformRef_</PlatformRef_.prototype._moduleDoBootstrap@http://localhost:4200/main.bundle.js:23513:13 
PlatformRef_</PlatformRef_.prototype._bootstrapModuleFactoryWithZone/</</<@http://localhost:4200/main.bundle.js:23481:21 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64628:17 
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:25787:28 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64627:17 
Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:64510:24 
scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:64898:52 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64661:21 
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:25778:28 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64660:21 
Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:64550:28 
drainMicroTaskQueue@http://localhost:4200/main.bundle.js:64797:25 

Stack trace: 
resolvePromise@http://localhost:4200/main.bundle.js:64864:31 
makeResolver/<@http://localhost:4200/main.bundle.js:64841:13 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64628:17 
Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:64510:24 
scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:64898:52 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64661:21 
Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:64550:28 
drainMicroTaskQueue@http://localhost:4200/main.bundle.js:64797:25 
    main.bundle.js:64786:9 

不知何故，在組件初始化後，沒有正確設置this.logbooks。我錯過了什麼？怎麼修。

我一直在搞這一整天，所以非常感謝幫助！

親切的問候，

MackDoms

編輯：

//logbook.ts

export class Logbook { 
    public name: string; 

    constructor(name: string) { 
     this.name = name; 
    } 
} 

這是我指的教程，如果你看看英雄。 component.ts你可以看到他們也沒有初始化陣列：

export class HeroesComponent implements OnInit { 
    heroes: Hero[]; 

Answer 1

由於

this.getLogbooks(); 

是一個異步操作

console.log("Den logbooks" + this.logbooks[1].name); 

權下它會給出一個未定義的錯誤。

如果您想在到達時使用this.logbooks的值，您應該將邏輯移動到該函數的then的承諾回調中。

getLogbooks(): void { 
     this.logbookService.getLogbooks().then(logbooks => this.logbooks = logbooks); 
    }