Question

在阅读了我发现的关于可观察物的几乎所有内容后，我仍然不太了解它们是如何工作的。

我在这里做http请求：

<?php
include "dbFns.php";
dbConn();

function provaAJAX($value) {
switch ($value) {
    case "0":
        $query = dbSelect("name, lvl", "productsma", "id=1", "", "", "Errore nei risultati");
        print_r($query);
        break;
    case "1":
        $query = dbSelect("name, lvl", "productsma", "id=2", "", "", "Errore nei risultati");
        print_r($query);
        break;
    case "2":
        $query = dbSelect("name, lvl", "productsma", "id=3", "", "", "Errore nei risultati");
        print_r($query);
        break;
}
}

$value = $_POST["value"];
provaAJAX($value);

在控制台上，正确打印了this.webs。这意味着，get请求工作正常，我正在检索我想要的对象。这是一个普通的JSON对象。

问题是，在视图上，如果我尝试打印对象的某些属性（我在控制台上看到的相同属性），就像那样

import { Component, OnInit, Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Rx';    
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    webs: any;

    getWebs(): any{
        return this.http.get( 'here the url' )
        .map((res: Response) => res.json());
    }

    constructor(public navCtrl: NavController, private http: Http) {}

    ngOnInit(){
        this.getWebs().subscribe(response => {
            this.webs = response;
            console.log(this.webs);
        });
    }
}

我得到了错误的全部时间：

{{ webs.name }}

使用Angular 1很容易:(我已经阅读了很多教程，但我找不到任何问题的答案。

感谢您的帮助。

Answer 1

在返回http响应之前显示视图。

{{webs?.name}}

应该有效。或者做this.webs=getWebs() 和{{webs.name | async}}

Answer 2

应该是

this.getWebs().then((webs) => {
   webs.subscribe(response => {
      this.webs = response;
       resolve(webs);
       console.log(this.webs);
   });
})

所以在你得到Webs之后这样做。这是未经测试的代码，但是你得到了逻辑。在获取数据之前，您正在打电话。

 ngOnInit(){
    return new Promise(resolve => {
       this.http.get('webs.json')
           .map(res => res.json())
             .subscribe(webs => {
                  this.webs = webs;
                  resolve(this.webs);
             });
           });
  }

Ionic2，Angular2，HTTP和Observables

2 个答案: