Question

我正在学习Angular 2，而我自己正在申请。我使用InMemoryWebApiModule来模拟API。我正在学习英雄之旅＆＃34;角网站上的教程。虽然我的代码看起来和我一样，但它并不像我们想象的那样有效。

不知怎的，这个.logbooks没有被设置。我错过了什么？

//内存-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;
    }
}

这是我所指的教程，如果你看看heroes.component.ts，你可以看到他们也没有初始化数组：

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

Answer 1

由于

this.getLogbooks();

是异步操作

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

在它下面的

将给出一个未定义的错误。

如果您想使用this.logbooks＆＃39;它到达时的值你应该将你的逻辑移动到promises回调，这是该函数的then部分。

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

Angular 2 undefined属性this.logbooks

1 个答案: