在Angular 2中渲染之前等待远程数据

Question

我正在尝试从远程服务器获取JSON数据，并将其作为page对象传递给模板。

但是当我尝试在模板中获取page.name的值时，会收到错误消息：

Cannot read property 'name' of undefined

另一方面，console.log显示来自服务器的正确数据。

看起来，渲染过程不会等待先收到数据。

我做错了什么？

以下是我的.ts文件：

app.component.ts

import {Component, OnInit} from '@angular/core';
import {PageService} from './page.service';
import {Page} from './page';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [PageService]
})
export class AppComponent implements OnInit {
  page: Page;

  constructor(private pageSrv: PageService) {
  }
  ngOnInit(): void {
    this.pageSrv.getData(2802).then((result) => {
      this.page = result;
      console.log(this.page);
    });
  }
}

page.service.ts

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Page} from './page';

@Injectable()
export class PageService {


  constructor(private http: Http) {
  }

  getData(id: number): Promise<Page> {
    return this.http.get('http://example.com/items/' + id + '?expand=categories,comments,modifications,tags,media,fileFields')
      .toPromise()
      .then(response => response.json() as Page)
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

page.ts

export class Page {
  id: number;
  slug: string;
  name: string;
  sell_price: string;
  details: string;
  excerpt: string;
  imgUri: string;
  created_at: string;
  rating: number;
  categories: Array<any>;
  comments: Array<any>;
  media: Array<any>;
  tags: Array<any>;
}

Answer 1

将page变量初始化为空对象。