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}}

您使用junior代替Junior的代码中存在小错误

并且没有在控制台中发现任何错误，因为您在代码中使用了safe navigation (?)

Answer 2

通常，如果要在模板中打印对象，可以使用以下命令：

{{someObject | json}}

如果对象是可观察到的，还可以像这样添加async：

{{someObject | async | json}}

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

2 个答案: