将数组值输出到模板

Question

我目前正在学习 Angular 2，并且对如何将从服务返回的数据输出到我的模板感到困惑。

我的 API 回复：

{
  "site": {
    "success": true,
    "title": "foo",
    "description": "bar"
  }
}

我的服务：

 import { Injectable } from '@angular/core';
 import  {HTTP_PROVIDERS, Http, Response, Headers, RequestOptions } from "@angular/http";
 import { Observable } from 'rxjs/Rx';


 @Injectable()
 export class ContentService {
     constructor(private _http:Http) {}

     getContent() {
         return this._http.get('http://localhost:8080/api/foobar-endpoint/')
             .map((res:Response) => res.json())
     }

 }

我的组件：

import { Component, OnInit } from '@angular/core';
import { ContentService } from "../../services/content/content.service";

const template = require('./home.jade');
const styles = require('./home.sass');

@Component({
    selector: 'home',
    templateUrl: template,
    styleUrls: [styles]
})

export class HomeComponent implements OnInit {

    public foo = {}

    constructor(private _contentService: ContentService) {}

    ngOnInit() {
        this.getContent();
    }

    getContent() {
        this._contentService.getContent()
            .subscribe(
                data => {this.foo = data},
                err => { console.log(err) },
                () => console.log()
            );
    }

}

我的模板：

pre
    p {{ foo.site.title }}

如果我将 {{ foo | json }} 放在我的模板中，我可以看到 JSON 格式的返回值，但是当我尝试输出单个值时，例如 title 我得到未定义的错误。

如何访问返回的值？

Answer 1

我认为您在这里唯一缺少的是 ?。基本上问题在于，当组件实例化时，您的 foo 属性没有 site 参数，因此 angular 会抛出错误。

所以你可以做的是：

{{foo.site?.title}}

或者这样：

<p *ngIf="foo.site">{{foo.site.title}}</p>

这样 angular 不会在有网站之前尝试绑定标题。

将数组值输出到模板

Output array values to template

json

angular-template

angular