如何在 Angular2 的模板中打印对象属性

Question

我是 angular2 的新手，正在尝试将对象结果绑定到 html 模板。我可以使用 Observable 从 srtvice 获取数据。我也可以在控制台和模板中看到 JSON 数据。但是当我尝试从结果 json 访问属性时，它没有显示如下图所示的数据。

下面是我的那个组件的代码，

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { JuniorService } from '../Service/service.junior';
import { Employee } from '../../models/Employee';


@Component({
  selector: 'my-getjunior',
  template: `<h1>Details of {{id}} 
  <hr/>
  JSON :  {{Junior | json}} 
  <hr/>
  Summary :  {{junior?.summary}}</h1>`
  //templateUrl: './app/Junior/get/junior.get.html'
})
export class JuniorGet implements OnInit
 {

errorMessage: string;
Junior: Employee;
id: number;
private sub: any;

  constructor (private juniorService: JuniorService, private route: ActivatedRoute) {

 }

  ngOnInit(){
      this.sub = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number
     this.getJunior(this.id);
    });
  }

    getJunior(id) {
      this.juniorService.getById(id)
                      .subscribe(
                        data => {
                            this.Junior = data;
                            console.log("Junior data", this.Junior);
                          },
                        error =>  this.errorMessage = <any>error);
  }


}

我在 imit 方法上调用服务以及我想在模板中看到的数据。

我还需要更改哪些地方才能打印数据？

Answer 1

像这样使用你的代码

{{Junior?.summary}}

there is small typo in your code you are using junior instead of Junior

并且不会在控制台中抛出任何错误，因为您在代码中使用了 safe navigation (?)

Answer 2

一般来说，如果您想在模板中打印对象，可以使用以下方法：

{{someObject | json}}

如果对象是可观察的，您还可以添加 async，例如：

{{someObject | async | json}}

如何在 Angular2 的模板中打印对象属性

How to print object properties in template in Angular2

angular

angular2-template

angular2-forms

angular2-services

angularjs-templates