تايب سكريبت - مشكلة الحصول على JSON باستخدام Angular2 عبر HTTP

محاولة عرض استجابة HTTP بصيغة JSON في عرض Angular2. للبدء، أكملت برنامجًا تعليميًا محددًا لـ .NET core و Angular2 مع Typescript. كل شيء عمل بشكل جيد، لذا حاولت تعديله قليلًا لكن يبدو أنني عالق ولا أستطيع إيجاد الإجابة. هذا ما لدي حتى الآن.

الجدار. المكون. الرئيسي. 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>
    <p>{{data.Id}}</p>
    <p>{{data.Body}}</p>
</wall>

Html لا يعرض البيانات. الخطأ:

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

جربت الكثير من الطرق. الوصول كمصفوفة باستخدام الفهرس data[0].Id، تغيير أنواع المتغيرات، لا شيء. أيضا هذا console.log(json) يعمل بشكل جيد. أستطيع رؤية وقراءة الكائن في الكونسول، لكن الآخر console.log(this.data) يظهر غير معرف، والذي كنت أتوقع أن يكون نفسه. ما الذي أفتقده؟

الإجابة رقم 1

عند العرض عندما بدأ CD، تحاول عملية الاستبدال data.Id التقييم، لكن كائن data لم يتم تعريفه بعد. لذلك عندما حاول الوصول إلى خاصية Id منه، قام برمي خطأ.

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

الشيء الآخر الذي أردت الإشارة إليه هو، أنه لا فائدة من وجود عنصر wall مرة أخرى، حيث أنك تقوم بالفعل بعرض مكون wall.(أعلم أنه لن يعمل، لأننا لم نقدمه داخل خيار directives الخاص بـ Component)