Angular 2 http - 从API获取数据

问题描述：

我试图从这个站点获取JSON格式的数据https://api.chucknorris.io/（随机笑话），但我得到一个错误：错误错误：无法找到不同的支持对象'[object Object] '类型'对象'。 NgFor仅支持与阵列等Iterables绑定。而 “DebugContext_ {视图：对象，nodeIndex：11，nodeDef：对象，elDef：对象，elView：对象}”Angular 2 http - 从API获取数据

这是routing.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class RandomService { 
    constructor(private http: Http) { 
     console.log('working'); 

    } 
    getRandomJokes() { 
     return this.http.get('https://api.chucknorris.io/jokes/random') 
      .map(res => res.json()); 
    } 
}

这是我想要的组件数据放入

<div *ngFor="let joke of jokes"> 
<h3>{{joke.value}}</h3> 
</div> 

`, 
providers: [RandomService] 

}) 
export class PocetnaComponent { 
jokes: Joke[]; 

constructor(private jokesService: RandomService){ 
this.jokesService.getRandomJokes().subscribe(jokes => {this.jokes = jokes}); 
} 

} 
interface Joke{ 
id: number; 
value: string; 
}

'getRandomJokes（）'没有返回数组等你笑话.. – echonax

答

你是没有约束力的阵列到*ngFor，你必须确保jokes实际上是一个数组，而不是一个乱开玩笑的对象。

要解决它，如果它是一个对象，你可以做this.jokes = [jokes]。

甚至不是在开玩笑 –

这是一个很好的解决方案，但为什么还要设置阵列'jokes'？为什么不移除* ngFor并只显示对象的属性？ – Alex

@ AJT_82这就是我会做的，但这不是问题。因此它不是答案:) – Chrillewoodz

答

您提到的url只在对象中提供了单个值，因此您无法对其进行迭代。

也许，多次调用是这样的：

getRandomJokes(n = 10){ 
    return Promise.all(Array(n).fill(0) 
      .map(() => this.http.get('https://api.chucknorris.io/jokes/random').toPromise() 
           .then(res => res.json())); 
}

，并承诺使用

this.jokesService.getRandomJokes().then(jokes => {this.jokes = jokes});

答

您可以检查它是否是一个数组，然后去ngFor或笑话转换成阵列状让利笑话= [笑话];

<div *ngIf = "jokes.length > 0" ; else check> 
    <div *ngFor="let joke of jokes"> 
     <h3>{{joke.value}}</h3> 
    </div> 
</div> 
<ng-template #check> 
    <p>print the value of the object </p> 
</ng-template>

答

可能是jokes不是数组。

<div *ngIf="Array.isArray(jokes)> 
<div *ngFor="let joke of jokes"> 
<h3>{{joke.value}}</h3> 
</div>

答

由于您接收的不是数组，而是对象，因此您得到的错误是因为对象无法被迭代。您可能想重新考虑命名，因为我们只处理一个对象，joke将是一个更合适的名称。但是，在这里，我们使用jokes。

所以，你应该做的是完全去除*ngFor，并只显示与价值：

{{jokes?.value}}

闲来无事需要:)注意这里航行安全运营，保障其财产路径null和undefined值。准备在异步世界中使用很多;）

以下是关于安全导航运算符的更多信息，从official docs。

Angular 2 http - 从API获取数据

相关推荐