Question

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

使用点表示法（obj.property）访问对象的属性。通过传入键值来访问对象的属性，例如obj [＆＃34; property＆＃34;]

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

如果我＆＃39; page.id＆＃39; 或任何属性我收到错误：

EXCEPTION：未捕获（在承诺中）：错误：./ PageSingleComponent类中的错误PageSingleComponent - 内联模板：3：6导致： undefined不是一个对象（评估＆＃39; self.context.page.id＆＃39;）

我的组件是

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>

CONSOLE.LOG

Answer 1

由于组件的page属性未分配默认值，因此在subscribe中的PageSingleComponent.getPost回调设置它之前，实际上并未对其进行定义。这会导致错误，因为您无法访问id的{{1}}属性，因为它不是对象。

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

执行此操作

ng-if

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

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

Angular 2 - [Object Object] - 使用点表示法访问对象的属性不起作用

1 个答案: