我在关注this tutorial人.正在从api获取用户列表的过程中.github Im获取错误:

找不到不同的支持对象‘[Object Object]’

我认为这与

 <ul>
 <li *ngFor = "#user of users">
 {{user | json}}
 </li>
 </ul>

在我的代码中,因为在此之前没有任何错误,我不确定数据是否来自get请求,只需单击"没有给出任何错误",这是我迄今为止的代码

@Component({
selector: 'router',
pipes : [],

template: `
<div>
<form [ngFormModel] = "searchform">
      <input type = 'text' [ngFormControl]= 'input1'/>
</form>
     <button (click) = "getusers()">Submit</button>
</div>
<div>
<ul>
    <li *ngFor = "#user of users">
    {{user | json}}
    </li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives: [FORM_DIRECTIVES]
})
export class router {
searchform: ControlGroup;
users: Array<Object>[];
input1: AbstractControl;

constructor(public http: Http, fb: FormBuilder) {
    this.searchform = fb.group({
        'input1': ['']
    })
    this.input1 = this.searchform.controls['input1']
}
getusers() {
    this.http.get(`https://api.github.com/
search/users?q=${this.input1.value}`)
        .map(response => response.json())
        .subscribe(
        data => this.users = data,
        error => console.log(error)
        )
}
}
bootstrap(router, [HTTP_PROVIDERS])

推荐答案

我认为您在响应负载中收到的对象不是array.可能要迭代的数组包含在属性中.你应该判断接收数据的 struct ...

你可以试试这样:

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}

Edit

在Github文档(developer.Github.com/v3/search/#search users)之后,响应的格式是:

{
  "total_count": 12,
  "incomplete_results": false,
  "items": [
    {
      "login": "mojombo",
      "id": 1,
      (...)
      "type": "User",
      "score": 105.47857
    }
  ]
}

因此,用户列表包含在items字段中,您应该使用:

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}

Angular相关问答推荐

Angulat 17@ngrx/Signals或全球服务,用什么?

Angular 动画—淡出适用于DIV,不完全适用于子组件

Angular :将动态创建的零部件附加为目标元素的子项

CDK虚拟滚动由于组件具有注入属性而在滚动时看到错误的值

带信号数据源的17角material 表

Angular 17:在MouseOver事件上 Select 子组件的正确ElementRef

使用jsPDF生成带有图像的PDF时出现灰色条纹

Angular react 形式验证问题

带区域设置用法的Angular 日期管道

Angular Mat Select 显示键盘焦点和鼠标悬停焦点的问题

Angular 16:信号更新未能更新视图

Angular:将间隔与增量和减量相结合

Angular模板错误:Property does not exist on type component

带有 Angular 2 的 Django

Angular 2:Validators.pattern() 不工作

将查询参数附加到 URL

Angular 2: Debounce(ngModelChange)?

取消订阅服务中的http observable

Angular 6 - NullInjectorError:单元测试中没有 HttpClient 的提供者

Angular CLI 输出 - 如何分析Bundle 文件