Angular 2 - [Object Object] - 使用点符号访问对象的属性不起作用

Question

我知道在 Angular 中有两种访问对象值的方法

使用点符号 (obj.property) 访问对象的属性。 通过传入键值来访问对象的属性，例如 obj["property"]

如果我输出 {{ page | json }} ，我得到一个包含所有列表的对象。

如果我执行 ' page.id ' 或任何属性，我会收到错误：

异常：未捕获（承诺中）：错误：./PageSingleComponent 类 PageSingleComponent 中的错误 - 内联模板：3:6 由以下原因引起： undefined 不是对象（评估'self.context.page.id'）

我的组件是

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

@Component({
  selector: 'app-page-single',
  templateUrl: './page-single.component.html',
  styleUrls: ['./page-single.component.css'],
  providers: [PageService]
})
export class PageSingleComponent implements OnInit {

  page: Page;

  constructor( private pageService: PageService, private route: ActivatedRoute ) { }




  getPost(slug){
  console.log('page slug is',slug);
    this.pageService
      .getPost('other-page')
      .subscribe(res => {
        this.page = res[0];
         console.log('posts inside', res, slug);
      });
  }

  ngOnInit() {

    this.route.params.forEach((params: Params) => {
       let pageSlug = params['pageSlug'];
       this.getPost(pageSlug)
    });

  }

}

页面服务

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Page } from './page';

@Injectable()
export class PageService {

  private _wpBase = "http://ecommerce-ux.london/wp-json/wp/v2/";

  constructor(private http: Http) { 
    this.http = http
    this.getPost().subscribe(
        (data) => {
          console.log('posts', data)

        },
        (err) =>  console.log("Error Loging In:",err),
        () => { console.log("All Good With The posts Data")  }
      );




  }

  getPages(): Observable<Page[]> {

      return this.http
        .get(this._wpBase + 'pages')
        .map((res: Response) => res.json());
  }

  getPost(pageSlug): Observable<Page> {

      return this.http
       .get(this._wpBase + `pages?slug=${pageSlug}`)
        .map((res: Response) => res.json());

  }

}

页面-single.component.html

<div>
   <!-- {{ page | json }} works -->
  <h1>{{ page.id  }}</h1>

</div>

控制台.log

Answer 1

因为你的组件的page 属性没有被分配一个默认值，所以直到PageSingleComponent.getPost 中的subscribe 回调设置它才真正定义。这会导致错误，因为您无法访问 undefined 的 id 属性，因为它不是对象。

要解决此问题，您需要在设置 page 之前避免评估模板表达式。你可以通过ng-if：

<h1 *ngIf=“page”>{{ page.id  }}</h1>

或者你可以使用安全导航操作符：

<h1>{{ page?.id  }}</h1>