javascript - 在 Angular2 中将 observables 与 http 服务一起使用时出现错误 : Cannot read property '[property]' of undefined

Question

我正在慢慢构建一个 angular2 网站，但我对这个平台仍然非常缺乏经验。现在我有两个使用相同服务的组件:story 和storyDe​​tails。故事组件只是从我的 Web api 获取所有故事的列表。 StoryDe​​tails 组件将列出有关单个故事的更多详细信息。 Stories 组件工作正常，但当我尝试加载 StoryDe​​tails 组件时出现错误。

未捕获( promise 中):错误:/app/stories/details/storyDe​​tails.component.template.html:0:22 中出现错误，原因是:无法读取未定义的属性“标题”

我在服务的 extractData 函数上设置了断点，并验证了 json 正在返回并且具有以下值: body = Object {storyId: 1, urlAffix: "a_story_title", title: "A Story Title", text: "This is the Story",entityId: null…} 但是，应该注意的是，我在执行此行之前收到了错误。

以下是相关文件:

storyService.service.ts

import {Injectable} from '@angular/core';
import {Story} from '../story';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

@Injectable()
export class StoryService {
    private storyUrl = 'http://localhost:51332/api/storyapi';  // URL to web API
    constructor(private http: Http) { }
    getStories(): Observable<Story[]> {
        return this.http.get(this.storyUrl)
            .map(this.extractData)
            .catch(this.handleError);
    }
    getStoryDetails(storyId: Number): Observable<Story> {
        return this.http.get(`${this.storyUrl}/${storyId}`)
            .map(this.extractData)
            .catch(this.handleError);
    }
    private extractData(res: Response) {
        let body = res.json();
        return body;
    }
    private handleError(error: any) {
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
}

storyDe​​tails.component.ts

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';

import { Story } from '../story.ts';
import { StoryService } from '../services/storyService.service';

import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'storyDetails',
    templateUrl: '/app/stories/details/storyDetails.component.template.html',
    providers: [StoryService]
})

export class StoryDetails implements OnInit {
    errorMessage: string;
    story: Story;
    mode = 'Observable';
    storyId: Number;
    private sub: any;
    constructor(private storyService: StoryService, private route: ActivatedRoute) { }
    ngOnInit() {

        this.route.params.subscribe(params => {
            this.storyId = +params['id']; // (+) converts string 'id' to a number
            this.getStoryDetails(this.storyId);
        });
    }
    getStoryDetails(storyId : Number) {
        this.storyService.getStoryDetails(storyId)
            .subscribe(
            story => this.story = story,
            error => this.errorMessage = <any>error);
    }
    ngOnDestroy() {
        this.sub.unsubscribe();


  }
}

storyDe​​tails.component.template.html

<h2>Story Details</h2>


{{story.title}}

故事.ts

export class Story {
    public storyId: Number;
    public urlAffix: string
    public title: string;
}

我注意到，如果我不在模板 html 文件中放置任何引用故事对象的内容，我就不会收到错误。我确信我犯了一个菜鸟错误，但我就是找不到它。

Answer 1

storyDe​​tails 组件在定义之前尝试渲染 {{story.title}}。尝试将您的组件或仅标题包装在 *ngIf 中。一旦异步调用完成(并且定义了故事)，跨度将与标题一起呈现。

<span *ngIf="story">
    {{story.title}}
</span>