Компонент не отображает данные из моего API

import { Component,ViewEncapsulation, OnInit} 	from '@angular/core';
import { UserService }                          from './services/user.service';
import { User } 							    from './class/user'
import { Observable, BehaviorSubject} 		    from "rxjs";

@Component({
    selector: 'my-app',
    template: `
    <li *ngFor="let user of users" >{{user.username}}</li>
	<span (click) = 'log'>log</span>
    `
})
export class AppComponent {
	users : User[] 

	constructor( private userService: UserService){ }

	ngOnInit(){
		this.userService
		    .getUsers()
		    .then((res) => { 
		                     if (res.users){
                                        this.users = res.users;} 
				    });
	}

	log(){
		console.log(this.users)
	}

import { Injectable }                 from '@angular/core';
import { Headers, Http, Response }    from '@angular/http'; 
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import { LocalStorage }               from '../class/local-storage';
import { User }                       from '../class/user';

@Injectable()
export class UserService {

    private apiUrl = 'https://localhost:4000/';
    users : User[];
    private token = localStorage.getItem('token');
  
  constructor(private http : Http) {}

  getUsers(){
        return this.http
                   .get(this.apiUrl + 'users?token=' + this.token)
                   .toPromise()
                   .then(res => res.json())
  }
}