json - Angular2 http 获取 json 问题

Question

尝试在 angular2 View 中显示 http json 响应。为了让我开始，我已经用 Typescript 完成了 .NET 核心和 Angular2 的特定教程。一切正常，所以我试着稍微修改一下，但看起来我卡住了，找不到答案。这是我目前所拥有的。

wall.main.component.ts

import {Component, OnInit} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/src/common/directives/core_directives";
import {WallService} from "./wall.service";

@Component({
    selector: "wall",
    templateUrl: "app/components/wall/wall.main.html",
    providers: [WallService],
    directives: CORE_DIRECTIVES
})
export class WallComponent implements OnInit {
    data: any;

    constructor(private service: WallService) { }

    ngOnInit() {
        this.get();
        console.log(this.data);
    }

    get() {
        this.service.get().subscribe((json: any) => {
            console.log(json);
            this.data = json;
        });
    }
}

wall.service.ts

import "rxjs/Rx"
import {Http} from "angular2/http";
import {Injectable} from "angular2/core";

@Injectable()
export class WallService {
    constructor(private http: Http) { }

    get() {
        return this.http.get("wall/getwallposts").map(response => response.json());
    }
}

wall.main.html

<wall>
    <p>{{data.Id}}</p>
    <p>{{data.Body}}</p>
</wall>

Html 不显示数据。错误:

TypeError: Cannot read property 'Id' of undefined in [{{data.Id}} in WallComponent@3:7]

尝试了很多方法。作为具有索引数据 [0].Id 的数组进行访问，更改变量类型，什么都没有。此 console.log(json) 也可以正常工作。我可以在控制台中查看和读取该对象，但另一个 console.log(this.data) 显示未定义，我希望它是相同的。我错过了什么？

Answer 1

在 CD 启动时的 View 中，data.Id 插值尝试求值，但 data 对象尚未定义。因此，当它尝试从中访问 Id 属性时，它会抛出一个错误。

<wall>
    <p>{{data?.Id}}</p>
    <p>{{data?.Body}}</p>
</wall>

我想指出的另一件事是，再次使用 wall 元素是没有意义的，因为您已经渲染了一个 wall 组件。(我知道它是不会工作，因为我们没有在 Component 的 directives 选项中提供它)