使用服务提供程序（打字稿/角度 2）在 ionic 2 视图中恢复和显示 json 数据（对象、数组）

Question

I am new with angular 2 and ionic 2 (nodejs and typescript too to be honest).

I have a list of users here . This is just for a test but later I call a real API to recover my user in database.

So I create a provider in my ionic 2 project named test-service.ts (here's the code):

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

@Injectable()
export class PeopleService {

  public users: any[];

  constructor(public http: Http) {
    this.users;
  }

  load(){
    this.http.get('https://demo6000522.mockable.io/test')
    .map(res => res.json())
    .subscribe(
      data => {
        this.users = data;
        console.log(this.users);
        return Promise.resolve(this.users)
      },
      err => {
          console.log("it's seems like there is no users here !");
      }
    );
  }
}

Here I recover my users in the peoples array (check the url above).

In my users.ts I have this:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
// import our provider here
import {PeopleService} from '../../providers/test-service';

@Component({
  selector: 'page-users',
  templateUrl: 'users.html',
  // Import here our service to use api
  providers: [PeopleService]
})
export class UsersPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public peopleService: PeopleService) {
    this.loadPeople();
  }

  loadPeople(){
    this.peopleService.load()
  }
}

And finally in my users.html :

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Users</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <p>{{ user.fistname }}</p>
      <p>{{ user.lastname }}</p>
      <p>{{ user.email }}</p>
    </ion-item>
  </ion-list>
</ion-content>

All works well, ie no errors occured, I recover my datas in my console browser but not in my ionic view as you can see on the image below:

PS: don't care about the WebSocket connection error. I am using docker and I have not resolve this issue yet. But it's not the purpose of this post. Thank you.

How can I display my json data in the view ?

Answer 1

1. use peoples property of your response:

this.users = data['peoples'];

--> Currently your users variable will get the returned object instead of only the user-array.

2. use the users variable from your service:

<ion-item *ngFor="let user of peopleService.users">

--> currently your template searches a users var inside of your component. Cause there isn't a variable like this, it is undefined. And *ngFor with undefined will result in nothing . :)

UPDATE

How you could do it more elegant..

1. Use a BehaviorSubject :

public users = new BehaviorSubject<any /* or your class-type */>([] /* initial value */);

2. keep your BehaviorSubject up to date..

public refresh () {
   this.http.get('https://demo6000522.mockable.io/test')
      .map(res => res.json())
      .map(res => res['peoples'])
      .subscribe(
         ppls => this.users.nex(ppls),
         err => {
            console.log("it's seems like there is no users here !");
      });
}

3.1. use it inside of your template

<ion-item *ngFor="let user of peopleService.users | async">

3.2. or subscribe to it and keep a local copy inside of your component

private _users: any[];

ngOnInit() {
   this._users = this.peopleService.users.value; // get current value out of our BehaviorSubject
   this.peopleService.users.subscribe(ppls => this._users = ppls); // subscribe to changes !
   this.peopleService.refresh();
}

<ion-item *ngFor="let user of _users">