查看Github用户

Now that we have our users, it's time to view them in the users page. Before we can do this, we need to test whether we get users from our provider.

Opensrc/pages/users/users.tsfile and make it look like this.

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

import { User } from '../../models/user';

import {  GithubUsers } from '../../providers/github-users';

@Component({
  selector: 'page-users',
  templateUrl: 'users.html'
})
export class UsersPage {
  users: User[]

  constructor(public navCtrl: NavController, private githubUsers: GithubUsers) {
    githubUsers.load().subscribe(users => {
      console.log(users)
    })
  }
}

First, we've imported the GithubUsers Provider at the top withimport {GithubUsers} from '../../providers/github-users';. We've also import theUsermodel.

In the constructor of ourUsersPage, we've addedgithubUsers: GithubUsersas one of the parameters. This is how we inject dependencies in Angular 2. We then call the load function in the constructor and log the result withconsole.log.

Make sure ionic server is running, if not, runionic servein your terminal, then head over tohttps://localhost:81000, and open the console panel in Chrome Dev Tools .

You should see that an array of objects has been logged to our console, and on further inspection, it has almost all the properties of our user model.

To view the users in our view page, we need a local variable in the UserPage class that will be an array of Users. That is why we addedusers: User[], just after the class declaration. We'll assign it the the reponse of the githubUsers service call.

src/pages/users/users.ts

// Imports commented out for brevity

@Component({
  // Commented out for brevity
})
export class UsersPage {
  users: User[]

  constructor(public navCtrl: NavController, private githubUsers: GithubUsers) {
    githubUsers.load().subscribe(users => {
      this.users = users;
    })
  }
}

We now edit the html view to display the github users.

src/pages/users/users.html

<ion-header>
  <!-- ion-header contents commented out for brevity -->
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let user of users">
      <ion-avatar item-left>
        <img [src]="user.avatar_url">
      </ion-avatar>
      <h2>{{ user.login }}</h2>
      <ion-icon name="arrow-forward" item-right></ion-icon>
    </button>
  </ion-list>
</ion-content>

Theion-listcomponent is used to render lists in ionic.

The items in the list have anion-itemdirective which we will loop through with Angular 2's built in*ngFortemplate directive. We loop through all of the users with*ngFor="let user of users".users_here refers to the UsersPage class property_users

We then use property binding to load the avatar withinion-avatar, which just adds a rounded border to the image. Remember our user model had anavatar_urlproperty, hence theuser.avatar_url.

We then add the user's github username, which in this case is{{user.login}}.

Theion-iconis used for loading ionic icons. You simply give the name of the icon you'd like to use. In this case it'sarrow-forward.

Theitem-rightdirective puts the icon to the far right of the list item.

Spin up the server if it's not running withionic servein your terminal, the head over tohttp://localhost:8100. You should see this.