Question

我正在使用Ionic2，我已经创建了一个返回json数据的服务，但是我无法理解“概念”。

我有

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';

@Injectable()
export class PlaceService {

constructor(private http: Http) {}

getPlaces()
{ 
  let url = '/api/43.009953/-81.273613/b502daab-2c7b-4cea-a00e-dc5aa6b58196';
  return this.http.get(url).map(res=>res.json())

}

getPlace()
{
  let url = '/api/getplace/b502daab-2c7b-4cea-a00e-dc5aa6b58196/6';
  return this.http.get(url).map(res=>res.json())

}

}

我理解我的两个函数都返回Obserables，但是当我尝试在一个页面中使用它们时，事情会让我感到奇怪。

这是在页面的.ts中使用它的代码

public placeName:string;
public place:any;
public amenities: any;
constructor(public navCtrl: NavController, 
public placeService: PlaceService, 
public navParams: NavParams,
public actionSheetCtrl: ActionSheetController) {

  let placeId = navParams.get("placeId");

  placeService.getPlace().subscribe(data=>{
     this.place = data.Place;
     this.placeName = this.place.Name;
     this.amenities= data.Amenities;
     console.log(this.amenities);
  });

}

正如你所看到的，我有this.place = data.Place这是一个具有平面属性和集合属性的json对象。

似乎我拥有的每个平面属性来自我的observable，我必须在我的页面ts中创建一个属性，以便能够在html中访问它。例如this.placeName = this.place.Name

为什么我没有一个对象是我的整个json对象（平面和集合属性）并在我的页面中像这样引用它

Answer 1

您实际上可以..仅将其分配给字段并继续在模板中使用该字段。例如：

  placeService.getPlace().subscribe(data=>{
     this.data = data;
  });

示例模板：

<div>
    <p>{{data?.Place}}</p>
    <p>{{data?.Place?.name}}</p>
    <p>{{data?.Amenities}}</p>
</div>

注意：安全导航操作员＆＃34; ?＆＃34;对异步数据很有用。这意味着当data不是null执行data.Place

时

了解可观察量如何发挥作用

1 个答案: