如何在 Angular2 的模板中打印对象属性
How to print object properties in template in Angular2
我是 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 方法上调用服务以及我想在模板中看到的数据。
我还需要更改哪些地方才能打印数据?
像这样使用你的代码
{{Junior?.summary}}
there is small typo in your code you are using junior
instead of Junior
并且不会在控制台中抛出任何错误,因为您在代码中使用了 safe navigation (?)
一般来说,如果您想在模板中打印对象,可以使用以下方法:
{{someObject | json}}
如果对象是可观察的,您还可以添加 async
,例如:
{{someObject | async | json}}
我是 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 方法上调用服务以及我想在模板中看到的数据。
我还需要更改哪些地方才能打印数据?
像这样使用你的代码
{{Junior?.summary}}
there is small typo in your code you are using
junior
instead ofJunior
并且不会在控制台中抛出任何错误,因为您在代码中使用了 safe navigation (?)
一般来说,如果您想在模板中打印对象,可以使用以下方法:
{{someObject | json}}
如果对象是可观察的,您还可以添加 async
,例如:
{{someObject | async | json}}