Как использовать observable в angular2?

Question

[alexig]

Есть такой сервис:

import { Injectable } from '@angular/core';
import {Headers, Http, Response} from "@angular/http";
import {Observable} from 'rxjs/Observable';
import "rxjs/add/operator/map";
import 'rxjs/add/operator/catch';
import { User } from './user';

@Injectable()
export class UserService {
  private usersUrl = 'api/users';
  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http){}

  private extractData(res: Response) {
    let body = res.json();
    console.log("[user.service:extractData@body]: " + body.data[0].name);
    return body.data || { };
  }

  getUsers(): Observable<User[]> {
    return this.http.get(this.usersUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }

Из этого сервиса данные забирает такой компонент:

import { Component, OnInit } from '@angular/core';
import { User } from '../user';
import { UserService } from '../user.service';

@Component({
  selector: 'user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  user: User;
  users: User[];

  constructor(private userService: UserService) { }

  ngOnInit(): void { this.getUsers() }

  getUsers() {
    this.userService.getUsers()
      .subscribe((users) => {
        this.users = users;
        for (let u of users) {
          console.log("[user.component:getUsers] forInSubscribe: " + u.id + ":" + u.name);
        }
      });

    for (let u of this.users) {
      console.log("[user.component:getUsers] for: " + u.id + ":" + u.name);
    }

  }

}

В результате исполнения получаю ошибку типа

Navigated to http://localhost:4200/
core.es5.js:3046 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

user.service.ts:32 [user.service:getUsers@1] 
usercomponent.html:12 ERROR TypeError: Cannot read property 'name' of undefined
    at Object.eval [as updateRenderer] (usercomponent.html:12)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:12844)
    at checkAndUpdateView (core.es5.js:12149)
    at callViewAction (core.es5.js:12507)
    at execComponentViewsAction (core.es5.js:12439)
    at checkAndUpdateView (core.es5.js:12150)
    at callViewAction (core.es5.js:12507)
    at execEmbeddedViewsAction (core.es5.js:12465)
    at checkAndUpdateView (core.es5.js:12145)
    at callViewAction (core.es5.js:12507)

user.service.ts:27 [user.service:extractData@body]: ООО Рога и копыта

user.component.ts:25 [user.component:getUser] forInSubscribe: 11:ООО Рога и копыта
user.component.ts:25 [user.component:getUser] forInSubscribe: 12:user2
user.component.ts:25 [user.component:getUser] forInSubscribe: 13:u3
user.component.ts:25 [user.component:getUser] forInSubscribe: 14:u4
user.component.ts:25 [user.component:getUser] forInSubscribe: 15:u5

usercomponent.html:12 ERROR TypeError: Cannot read property 'name' of undefined
    at Object.eval [as updateRenderer] (usercomponent.html:12)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:12844)
    at checkAndUpdateView (core.es5.js:12149)
    at callViewAction (core.es5.js:12507)
    at execComponentViewsAction (core.es5.js:12439)
    at checkAndUpdateView (core.es5.js:12150)
    at callViewAction (core.es5.js:12507)
    at execEmbeddedViewsAction (core.es5.js:12465)
    at checkAndUpdateView (core.es5.js:12145)
    at callViewAction (core.es5.js:12507)
View_usercomponent_0 @ usercomponent.html:12

В логе видно, что внутри subscribe данные доступны и выдаются в консоль.
В компонент же они не попадают вероятно потому, что когда идет отображение в компоненте - Observable еще не вернулся и subscribe (в котором происходит обновление this.users) еще не отработал.

Как сделать чтобы компонент отрабатывал после того как придет Observable?
Или может я что-то упускаю здесь?

Answer 1

[SergeyBugai]

С учетом того что данные вы получаете с сервера то в момент инициализации шаблона переменная users все еще не определена, попробуйте такой синтаксис:
<li *ngFor="let u of users">{{u?.name}}</li>
или используйте пайп asynk

Comments

[Алексей Зуев]

Если users переменная не определена, то код {{u.name}} не будет вызываться. Мне кажется у него там вывод юзера от вот этого свойства user: User;

[SergeyBugai]

Алексей Зуев: оно то по идеи так, но в ошибке явно указано Cannot read property 'name' of undefined, то есть оно пытается прочитать.
Это же просто типизация user: User;

[SergeyBugai]

alexig можно еще код сервиса?

[Алексей Зуев]

Это просто типизация, но он может иметь во вью User Name {{ user.name }} Я именно это имел ввиду

[SergeyBugai]

Алексей Зуев: хз, без полного кода судить сложно, возможно с сервиса возвращается BehaviorSubject c каким то не правильным инициализационным значением. Но по тому коду что он скинул и ошибке явно видно что переменная users не пустая

[alexig]

Синтаксис с вопросом помог, в начале, когда переменная еще не определена, он предотвращает обращение к такой переменной. А после того как данные пришли, происходит обновление. Все заработало, спасибо!

[SergeyBugai]

alexig: не за что. Но интерестно почему вообще итерация происходит если переменная еще не инициализирована? Какая версия Ангуляра?

[Алексей Зуев]

alexig: Можете показать нам user.component.html?

[alexig]

Angular 2.
Еще я так думаю у меня было слишком много console.log с обращением к неинициализированной переменной. Если бы не они ангуляр вероятно справился бы :)
Решилось в сововкупности. Я стал причесывать код для публикации сюда. Поубирал "лишние" отладочные вызовы. И добавился "?"

[alexig]

та версия которая не работала... я ее не сохранил.
а работающая вот, пожалуйте:

import { Component, OnInit } from '@angular/core';
import { User } from './user';
import { UserService } from './user.service';

@Component({
  selector: 'user',
  template: `
<h1>Users:</h1>
<ul>
  <li *ngFor="let u of users">{{u.name}}</li>
</ul>
<h1>USER:</h1>
<div>{{user.name}}</div>`
})
export class UsersComponent implements OnInit {
  users: User[];
  user: User = { "id": 0, "login": "", "pass": "", "name": " ", "inn": " ", "address": " ", "phone": " ", "balance": 0 };

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.getUsers();
    this.getUser(+localStorage.getItem('curUser'));
  }

  getUsers() {
    this.userService.getUsers()
      .subscribe((userss) => {
        this.users = userss;
        // for (let u of userss) {
        //   console.log("[user.component:getUsers] forInSubscribe: " + u.id + ":" + u.name);
        // }
      });
  }

  getUser(id: number) {
    this.userService.getById(id)
      .subscribe((userss) => {
        this.user = userss;
        // console.log("[user.component:getUSER] user: " + this.user.id + ":" + this.user.name);
        // for (let u of userss) {
        //   console.log("[user.component:getUSER] forInSubscribe: " + u.id + ":" + u.name);
        // }
      });
  }

}

[SergeyBugai]

alexig: хоть 1000 логов выложите, ангуляру всеравноб может только консоль подвиснуть).
Все таки думаю Алексей Зуев был прав, ошибка у вас была в
<div>{{user.name}}</div>
так как user еще не инициализирован в момент рендеренга вьюхи.

Answer 2

[Николай]

Ошибка то судя по всему не тут, шаблон покажите. У вас там может быть есть что-то типа {{users.name}}?

Comments

[alexig]

да, есть:
<li *ngFor="let u of users">{{u.name}}</li>

но и в методе getUsers() есть обращение вне subscribe, которое тоже не отрабатывает:

for (let u of this.users) {
      console.log("[user.component:getUsers] for: " + u.id + ":" + u.name);
    }

[Николай]

Ну оно отрабатывает. Просто в этот момент this.users ещё пустой. Этот цикл же вне subscribe находится. Приложите весь шаблон компонента. Судя по всему проблема всё таки в нем.