APIからのデータを取得する

Question

私はこのサイトからJSON形式のデータを取得しようとしていますhttps://api.chucknorris.io/（ランダムジョーク）、エラーが表示されます：エラー：サポートオブジェクトが異なる[オブジェクトオブジェクト] ''オブジェクト 'のタイプです。 NgForは、配列などのIterablesへのバインドのみをサポートしています。そして、 "DebugContext_ {ビュー：オブジェクト、nodeIndex：11、nodeDef：オブジェクト、elDef：オブジェクト、elView：オブジェクト}"

これは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()); 
    } 
} 

これは私がしようとしているコンポーネントでありますあなたが*ngForに配列を結合していない

<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; 
} 

Answer 1

にデータを取得し、あなたはjokesは、実際には配列ではなく、ランダムなジョークオブジェクトであることを確認する必要があります。

オブジェクトであれば解決するには、this.jokes = [jokes]を実行してください。

Answer 2

urlあなたが言及しているのは、オブジェクト内で単一の値しか提供しないため、そのオブジェクトを反復処理することはできません。あなたはそれが配列であるかどうかを確認してからngForのために行くか、letのように配列にジョークを変換することができます

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}); 

Answer 3

を使用します。

たぶん、このように複数の呼び出しを行いますジョーク= [ジョーク];

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

Answer 4

jokesは配列ではありません。

Answer 5

受信したものは配列ではなくオブジェクトなので、取得するエラーはオブジェクトを反復できないためです。私たちがただ一つのオブジェクトを扱っているので、名前を再考したいかもしれません。jokeはより適切な名前になります。しかしここでは、jokesを使ってみましょう。必要とされている他の

{{jokes?.value}} 

何も:)プロパティパスでnullとundefined値を保護し、ここで安全なナビゲーション演算子を、注意してください：

だから、あなたが何をすべき完全*ngForを削除し、単純で値を表示しています。 ）

official docsから、安全なナビゲーションオペレーターに関する詳しい情報があります。