我跟随
this tutorial.在从api.github获取用户列表的途中我得到错误：
Cannot find a differ supporting object ‘[object Object]’
我认为它与之相关
<ul>
<li *ngFor = "#user of users">
{{user | json}}
</li>
</ul>
在我的代码中，因为在它之前没有任何错误，并且我不确定数据是否来自get请求，只是单击didnt没有给出任何错误，这是我的代码到目前为止
@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])
我认为您在响应有效负载中收到的对象不是数组。也许您要迭代的数组包含在属性中。你应该检查收到的数据的结构……
你可以尝试这样的事情：
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)
);
}
编辑
遵循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)
);
}
