Question

在我的angular2应用程序中，我试图使用Github服务并试图在UI上显示返回数据。

在第一次尝试中，我收到一个错误，提示“找不到类型为'object'的支持对象'[object Object]'。”我找出了错误的原因，并创建了一个自定义管道将对象转换为数组，但是仍然无法将数据绑定到UI。

服务代码：

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

您似乎正在以嵌套数组的形式获取结果，您的 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>

Answer 2

您的服务返回一个对象和一个嵌套在其中的数组-我只是尝试在浏览器上找到您的服务，然后找到了它-因此您的界面应该采用这种格式

GitHubUser对象

{
  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中删除了管道-这样您可能会得到您的成绩-希望这能帮助您-编码愉快：）

更新

我的答案略有更改，请检查此link工作版本

无法在Angular中显示从服务返回到html视图的返回数据。

2 个答案: