Компонентът не показва данни от моя API

Опитвам се да заредя и покажа списък с потребители от моя API, но списъкът ми не се показва, когато страницата приключи зареждането.

Трябва да направя друго взаимодействие (щракване върху бутон например), за да покажа списъка. преглед на моя пример

Но когато зареждам потребители от "mocks", нямам проблеми

моят компонент:

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


person KeiZ    schedule 30.08.2016    source източник
comment
каква е грешката?   -  person Pardeep Jain    schedule 30.08.2016
comment
няма грешка, списъкът ми не се появява, трябва да направя нещо на моята страница (например щракване върху бутон) и списъкът ми се появява. връзка   -  person KeiZ    schedule 30.08.2016
comment
какъв отговор връща вашия API? можете ли да покажете отговор   -  person Pravin Tukadiya    schedule 30.08.2016
comment
моят api връща json обект като този: { "page": 1, "users": [ { "id": 32, "username": "admin", "password": "admin", "salt": "wL2OB6ylkNK7rrd81OFwPg+FnJi09yKgBg7b1EtitnUJfHF+dZmltxl/NKRgtCTq+", "createdAt": "2016-08-25T13:14:03.000Z", "updatedAt": "2016-08-25T13:14:03.000Z" } ] }   -  person KeiZ    schedule 30.08.2016


Отговори (1)


<span (click)='log'>log</span> 

би трябвало

<span (click)='log()'>log</span>

също опитайте да използвате elvis operator т.е. ? по този начин

<li *ngFor="let user of users" >{{user?.username}}</li>

това означава, че когато данните са налични, те ще отразяват промените и не позволяват на angular да показва грешка,

все пак, ако имате някакъв проблем, предоставете plunker с вашия plunker и коментирайте тук, има нужда от някакъв проблем.

person Pardeep Jain    schedule 30.08.2016
comment
благодаря за отговора, но няма разлика, когато зареждам потребители от mocks, нямам проблеми. Мисля, че проблема ми идва от обаждането на моя сервиз - person KeiZ; 30.08.2016