无法将更新信息从提供商传递到页面

Question

我已经玩了几个小时并尝试了所有方法，所以我做了一个非常基本的无效示例来说明我需要什么：

server.ts（提供商从服务器获取数据）

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';


@Injectable()
export class ServerProvider {

  basicUrl: any = "http://5.5.5.5/hotel/admin/api.php";

  datos : any;

  constructor(public http: HttpClient) {
    console.log('Hello ServerProvider Provider');
  }


  getInfo() {
    return this.http.get(this.basicUrl).subscribe(result=>{
      this.datos = result;
    });
  }

}

tutorial.ts（将接收的页面）

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { ServerProvider } from "../../providers/server/server";

@IonicPage()
@Component({
  selector: 'page-tutorial',
  templateUrl: 'tutorial.html',
})
export class TutorialPage {
  titulo: any;
  datos: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public serverP: ServerProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TutorialPage');
    this.datos = this.serverP.datos;
    this.titulo = this.datos["titulo"];
  }

}

tutorial.html（查看信息显示的位置）

<ion-content padding>

    <p>{{titulo}}</p>

</ion-content>

我知道为什么这行不通，但我无法让可观察对象为我工作，也无法通过任何其他选项来做到这一点。

每次调用和解析 server.ts getInfo() 时，我都需要更新 titulo 变量。

Answer 1

您应该使用 rxjs 创建一个 Subject，并使用 Subject 中的 next() 方法发出值。每当调用服务 getInfo 时，datos$ 主题将发出值。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs'


@Injectable()
export class ServerProvider {

  basicUrl: any = "http://5.5.5.5/hotel/admin/api.php";

  datos : any;
  datos$ = new Subject<any>();
  constructor(public http: HttpClient) {
    console.log('Hello ServerProvider Provider');
  }


  getInfo() {
    return this.http.get(this.basicUrl).subscribe(result=>{
      this.datos = result;
      this.datos$.next(this.datos);
    });
  }

}

您应该订阅 component.ts 中的 datos$，并将其发出的值更新为 this.titulo

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { ServerProvider } from "../../providers/server/server";

@IonicPage()
@Component({
  selector: 'page-tutorial',
  templateUrl: 'tutorial.html',
})
export class TutorialPage {
  titulo: any;
  datos: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public serverP: ServerProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TutorialPage');
    this.serverP.datos$.subscribe(value => this.titulo = value["titulo"]);

  }

}

Answer 2

根据我的想法，将数据定义为 Subject<any>。然后每当你进行更新时，你调用 datos.next。在您的组件中，您开始使用 subscribe 收听 ngOnint 中的更新。每当调用 next 时都会调用 Subscribe，这就是为什么您只需要执行一次。

您的代码应如下所示： server.ts

datos : new Subject<any>();

..

return this.http.get(this.basicUrl).subscribe(result=>{
      this.datos.next(result);
    });

tutorial.ts

export class TutorialPage implements OnInit {
  titulo: any;
  datos: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public serverP: ServerProvider) {
  }

  ngOnInit() {
     this.serverP.datos.subscribe((datos) => this.titulo = this.datos["titulo"]);
  }

..

无法将更新信息从提供商传递到页面

Unable to pass updated info from provider to page

ionic-framework

ionic3

angular