Angular 2 undefined property 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 

Каким-то образом эти.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); 
    }