0

我是 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 方法的服务以及我想在模板中看到的数据。

我还需要在哪里更改才能打印数据？

4

2 回答 2

5

一般来说，如果要在模板中打印对象，可以使用以下内容：

{{someObject | json}}

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

{{someObject | async | json}}
于 2020-09-23T12:28:31.860 回答
4

像这样使用你的代码

{{Junior?.summary}}

您正在使用的代码中有小错字，junior而不是Junior

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

于 2017-04-08T07:12:46.110 回答