Ionic2 - 将数据从提供程序传递到页面

Question

>我正在学习 angular2，我正在尝试了解如何将数据从提供程序传递到页面

在pages文件夹中，我有一个名为 job-match 的目录，job-match.js里面有这段代码

import {Component, OnInit} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import {JobMatchService} from "../../providers/job-match";
@Component({
  selector: 'page-job-match',
  templateUrl: 'job-match.html'
})
export class JobMatchPage implements OnInit{
  private jobs: any = [];
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private jobMatchService: JobMatchService
  ) {
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad JobMatchPage');
  }

  ngOnInit(){     
    this.jobMatchService.getMatchJobs();
  }
}

您会注意到，我有一个名为JobMatchService的provider，其中包含我需要的数据getmatchJobs

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class JobMatchService {
  constructor(public http: Http) {
    console.log('Hello JobMatch Provider');
  }
  private jobs: any = [];
  getMatchJobs(){
     this.http.get('assets/data/jobs-match.json').map(res => res.json()).subscribe(data => {
      console.log(data);
      this.jobs = data;
    });
  }
}

当我这样做时console.log(data);我可以看到我需要的数据，但我试图了解如何将其传递回job-match.js，然后在内部job-match.html如何使用它？

我将非常感谢任何帮助，因为我似乎无法理解它。

Answer 1

返回从服务中观察到的 http。

getMatchJobs(){
 return this.http.get('assets/data/jobs-match.json').map(res => res.json());
 }

在组件调用中：

  jobs:any;
  ngOnInit(){     
    this.jobMatchService.getMatchJobs().subscribe(data=>{
      console.log(data);
      this.jobs=data;
    }
  }

Http教程角度2：文档

Answer 2

您需要将订阅部分从提供程序移动到页面：

页：

  ngOnInit(){     
    this.jobMatchService.getMatchJobs()
      .subscribe(data => {
          console.log(data);
          this.jobs = data;
       });
  }

供应商：

  getMatchJobs(){
     return this.http.get('assets/data/jobs-match.json').map(res => res.json());
  }