如何在 ngOnInit() 方法中显示来自 Http get 请求的对象?
How to display an object from Http get request in ngOnInit() method?
我在显示对象的 属性 时遇到问题,该对象是通过 Angular 中的 Http get 请求接收到的。我正在尝试在 ngOnInit() 方法中调用 HTTP 请求,这似乎工作正常:我收到了我需要的对象。但是后来我无法在 http 文件中显示它(属性 未定义)。看来我无法将 observable 连接到对象 属性。我做错了什么?
组件:
import { Component, OnInit } from '@angular/core';
import {Package} from "../shared/package";
import { Http} from "@angular/http";
import 'rxjs/Rx';
@Component({
selector: 'app-basket',
templateUrl: './basket.component.html',
styleUrls: ['./basket.component.css']
})
export class BasketComponent implements OnInit {
package: Package;
private baseUrl: string = 'https://basket-211b4.firebaseio.com/.json';
constructor(private http: Http) { }
ngOnInit() {
this.http.get(`${this.baseUrl}`).subscribe(
(result) =>{
this.package = result.json();
console.log(this.package);
}
)
}
Http 文件:
<li class="row totals">
<span class="price" >{{ package.id }}</span>
</li>
包裹class:
import {User} from "./user";
import {Service} from "./service";
export class Package {
constructor(public id: number, public totalCost: number, public dateCreated: string, public user: User,
public services: Service[]){}
}
控制台错误:./BasketComponent class BasketComponent 中的错误 - 内联 template:31:29 原因:无法读取未定义的 属性 'id'
控制台显示的对象:Object {dateCreated: "2017-05-14T18:47:56.000+0000", id: 1, services: Array(3), totalCost: 3600, user: Object}
您可以使用安全导航 (?) 运算符来显示属性,
<li class="row totals">
<span class="price" >{{ package?.id }}</span>
</li>
我在显示对象的 属性 时遇到问题,该对象是通过 Angular 中的 Http get 请求接收到的。我正在尝试在 ngOnInit() 方法中调用 HTTP 请求,这似乎工作正常:我收到了我需要的对象。但是后来我无法在 http 文件中显示它(属性 未定义)。看来我无法将 observable 连接到对象 属性。我做错了什么?
组件:
import { Component, OnInit } from '@angular/core';
import {Package} from "../shared/package";
import { Http} from "@angular/http";
import 'rxjs/Rx';
@Component({
selector: 'app-basket',
templateUrl: './basket.component.html',
styleUrls: ['./basket.component.css']
})
export class BasketComponent implements OnInit {
package: Package;
private baseUrl: string = 'https://basket-211b4.firebaseio.com/.json';
constructor(private http: Http) { }
ngOnInit() {
this.http.get(`${this.baseUrl}`).subscribe(
(result) =>{
this.package = result.json();
console.log(this.package);
}
)
}
Http 文件:
<li class="row totals">
<span class="price" >{{ package.id }}</span>
</li>
包裹class:
import {User} from "./user";
import {Service} from "./service";
export class Package {
constructor(public id: number, public totalCost: number, public dateCreated: string, public user: User,
public services: Service[]){}
}
控制台错误:./BasketComponent class BasketComponent 中的错误 - 内联 template:31:29 原因:无法读取未定义的 属性 'id'
控制台显示的对象:Object {dateCreated: "2017-05-14T18:47:56.000+0000", id: 1, services: Array(3), totalCost: 3600, user: Object}
您可以使用安全导航 (?) 运算符来显示属性,
<li class="row totals">
<span class="price" >{{ package?.id }}</span>
</li>