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();

  }

}

您会注意到我有provider名为JobMatchService，其中包含我需要的数据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 observable。

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：docs

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());
  }

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

2 个答案: