Angular 2 Observable всегда возвращает неопределенный - PullRequest
Новая
       10

Angular 2 Observable всегда возвращает неопределенный

0 голосов
/ 12 ноября 2018

Я всегда получаю неопределенный код моего компонента. Любая помощь будет оценена.

Если я пытаюсь написать в консоли, он возвращает 'undefined'.

Я использую Angular2 и использую код Visual Studio в качестве редактора. Ниже мой сервис и код компонента - 

**Service Code** 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable,of } from 'rxjs'

export interface GitHubUser
{
  html_url:string;
  avatar_url:string;
  login:string;
  score:string;
}

@Injectable({
  providedIn: 'root'
})
export class GitHubServiceService {

  constructor(private _http:HttpClient) { 
  }

  getGitHubData(_searchTerm):Observable<GitHubUser[]>{
    return this._http.get<GitHubUser[]>
    ("https://api.github.com/search/users?q="+_searchTerm);

  }
}

Код компонента 

import { Component } from '@angular/core';
import { GitHubServiceService,GitHubUser } from './git-hub-service.service';
import {filter,switchMap,debounceTime,distinctUntilChanged, } from 'rxjs/operators'
import {FormControl } from '@angular/forms';
import { Observable,of } from 'rxjs'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  users:GitHubUser[];
  data$:Observable<GitHubUser[]>;
  title = 'app';

  constructor(private _githubService:GitHubServiceService){
       this.data$= this._githubService.getGitHubData('greg')
       this.data$.subscribe(users=>this.users=users)
       console.log(this.users);
       console.log(this.users.length);
    }


  }

1 Ответ

0 голосов
/ 12 ноября 2018

Вы печатаете значение слишком рано. Запрос на поиск, скорее всего, не был завершен к тому времени, когда вы выводите значение на консоль.

Попробуйте напечатать это в подписке: 

this.data$.subscribe(users=> {
   this.users=users;
   console.log(this.users);
   console.log(this.users.length);
});
...