Невозможно отобразить возвращаемые данные из сервиса в html-представление в Angular.

Question

В моем приложении angular2 я пытаюсь использовать службу Github и отображать возвращаемые данные в пользовательском интерфейсе.

При первой попытке я получил сообщение об ошибке: «Не удается найти другой поддерживающий объект» [объект] в типе «объект». «Я выяснил причину ошибки и создал специальный канал для преобразования объекта.к массиву, но я не могу связать данные с пользовательским интерфейсом.

Сервисный код:

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 MyserviceService {

  constructor(private _http:HttpClient) { }

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

код трубы

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'derp' })
export class DerpPipe {
  transform (value, args) {
    return Array.from(value);
  }
}

App.component.ts

constructor(private _obj:MyserviceService){//(private _githubService:GitHubServiceService1){

   this.data$= this._obj.getGitHubData('gaurav');
   this.data$.subscribe(users=> {
      this.users=users;
      console.log(this.users);
  }); 

.html файл

*ngFor="let user of users | derp"
        {{ user.score }}

Answer 1

Ваш сервис возвращает объект и массив, вложенный в него - я просто пытаюсь запустить ваш сервис в браузере и нашел его - поэтому ваш интерфейс должен быть чем-то в этом формате

GitHubUser object

{
  total_count: number,
  incomplete_results: boolean,
  items: Users[]
}

Таким образом, ваш пользовательский объект должен быть в этом формате - я просто привязываю некоторые свойства, если вы хотите, чтобы вы могли связать все

Пользовательский объект

{
   score : string,
   type : string,
   site_admin : boolean
}

Тогда в вашем сервисе - который возвращает только объект, а не массив, просто измените ваш тип возвращаемого значения на GitHubUser и Observable<GitHubUser>, и в вашем компоненте пользователь должен быть объектом типа GitHubUser

Это должно читаться так - user: Users[] и после привязки вашего массива в вашем компоненте вот так

this.service.getGitHubData("gaurav").subscribe((res) => {
     this.users = res.items;

   })

Наконец HTML должен читаться как

*ngFor="let user of users"
        {{ user.score }}

Я удалилтруба из вашего HTML - таким образом, вы можете получить свой счет - надеюсь, это поможет - счастливое кодирование:)

Обновление

Я немного изменил свой ответ, проверьте это ссылка рабочая версия

Answer 2

Похоже, вы получаете результаты в виде вложенного массива. Ваш ngFor должен выглядеть примерно так:

<ul *ngFor="let user of users">
        <li>
             <ul *ngFor="let info of user.items">
            <li>{{info | json}}</li>  //here you can access properties
       </li>
</ul>