javascript - 使用服务提供者(typescript/Angular 2)在 ionic 2 View 中恢复并显示 json 数据(对象、数组)

Question

我对 Angular 2 和 ionic 2 很陌生(老实说，Nodejs 和 TypeScript 也是如此)。

我有一个用户列表here 。这只是为了测试，但稍后我会调用一个真正的 API 来恢复数据库中的用户。

因此，我在 ionic 2 项目中创建了一个名为 test-service.ts 的提供程序(代码如下):

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 !");
      }
    );
  }
}

在这里，我恢复了 peoples 数组中的用户(检查上面的 url)。

在我的users.ts中，我有这个:

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

最后在我的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>

一切正常，即没有发生错误，我在控制台浏览器中恢复了数据，但在 ionic View 中没有恢复，如下图所示:

PS: 不用关心 WebSocket 连接错误。我正在使用 docker，但还没有解决这个问题。但这不是这篇文章的目的。谢谢。

How can I display my json data in the view ?

Answer 1

1. 使用您的回复的 peoples 属性:

this.users = data['peoples'];

--> 目前，您的 users 变量将获取返回的对象，而不仅仅是用户数组。

使用服务中的users变量:

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

--> 目前，您的模板在组件内搜索 users var。因为不存在这样的变量，它是未定义的。并且 *ngFor 未定义将导致 什么都没有。 :)

更新

如何才能做得更优雅..

1. 使用BehaviorSubject:

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

让您的BehaviorSubject保持最新状态..

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。在模板中使用它

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

3.2。或订阅它并在您的组件中保留本地副本

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">