角度エラー： 'object'タイプの異なる[オブジェクトオブジェクト]を見つけることができません

Question

GETリクエストを使用して、残りの呼び出し（firebase）からjsonデータを取得するサービスがあります。

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 

twitter.service.ts

@Injectable() 
export class TwitterService { 
    constructor(private http: Http) {} 
    getJobs() { 
    var jobs = {} 
    console.log('Twitter Service Called !'); 
    return this.http.get('https://dmm-db.firebaseio.com/jobs.json') 
    .map(
     (response: Response) => { 
      var data = response.json(); 
      var jobs = [], item; 

      for (var type in data) { 
      console.log(type); 
       item = {}; 
       item.name = type; 
       jobs.push(item); 
      } 
      console.log(jobs); 
      return jobs; 
     } 

    ) 
    } 
} 

ミドル：私はこのエラーを修正するために中間box.component.html

任意の提案やソリューションの応答データを表示しようとしていますbox.component.ts

@Component({ 
    selector: 'app-middle-box', 
    templateUrl: './middle-box.component.html', 
    styleUrls: ['./middle-box.component.css'] 
}) 

export class MiddleBoxComponent implements OnInit { 

    constructor(private twitterService: TwitterService) { 
    twitterService.getJobs() 
     .subscribe(
     (jobs: any[]) => this.jobs = jobs, 
     (error) => console.log('Error: '+ error), 
     () => console.log('Completed') 
    ); 
    } 

中間box.component.html

<ul class="list-group" *ngFor="let job of jobs"> 
    <li class="list-group-item">{{ job.name }}</li> 
</ul> 

Answer 1

を使用することができますが、これらの

export class MiddleBoxComponent implements OnInit { 

    private jobs: any[]; 
    private isLoading: boolean = false; 

    constructor(private twitterService: TwitterService) { } 

    ngOnInit() { 
    this.isLoading = true; 
    this.twitterService.getJobs() 
     .subscribe((jobs: any[]) => { 
      this.jobs = jobs, 
      this.isLoading = false; 
     }, 
     (error: any[]) => console.log('Error: ' + error), 
     () => console.log('Completed') 
    ); 
    } 

ではなく、コンストラクタのあなたのAPIを呼び出すためにngOnInit（）を使用してみてください。それは良い習慣です。

<ul class="list-group" *ngIf="!isLoading" *ngFor="let job of jobs" > 
    <li class="list-group-item" > {{ job.name }}</li> 
    < /ul> 

Answer 2

ジョブは、コンポーネントではなく、Twitterサービス内で定義されています。

htmlで使用するには、middle-box.component.tsからジョブにアクセスするためにtwitterserviceが必要です。

ので、あなたがローカル・ジョブに割り当て、またはtwitterservice.jobs.name

Answer 3

これはnewbyからの回答ですので、塩分で取ってください。私もこの問題を抱えていましたが、非同期メソッドを使用してサブスクリプションを気にしなかったとき、問題はなくなりました。

@Component({ 
    selector: 'app-middle-box', 
    templateUrl: './middle-box.component.html', 
    styleUrls: ['./middle-box.component.css'] 
}) 

export class MiddleBoxComponent implements OnInit { 
    public jobs; 

    constructor(private twitterService: TwitterService) { 
    this.jobs = twitterService.getJobs(); 
    } 

---

<ul class="list-group" *ngFor="let job of jobs | async"> 
    <li class="list-group-item">{{ job.name }}</li> 
</ul> 

注：アンギュラ5では、あなたは、もはや（なしvar data = response.json()）観測可能で応答に.jsonを呼び出します。