Angular 2でngForを使用してAPIデータを反復する方法

Question

私はAngular 2で新しく、すべてのAPIデータを表形式で表示したいと思います。ここで が私の作業コードです：

http://plnkr.co/edit/CB3oGppm4fvoEExfDSRc?p=preview

しかし、私は私のファイルにこのコードを使用しています、私はエラーが生じています：

Type 'Response' is not assignable to type 'any[]'

はtest.component.html：

<h1>{{getData[0]?.name}}</h1> 
<h1>{{getData[0]?.time}}</h1> 
<div *ngFor="let item of getData"> 
    <span>{{item?.name}}</span> 
</div> 

app.component.ts

import { Component } from '@angular/core'; 

import { ConfigurationService } from './ConfigurationService'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 

export class AppComponent { 
    getData = []; 

    constructor(private _ConfigurationService: ConfigurationService) 
    { 
     console.log("Reading _ConfigurationService "); 
     //console.log(_ConfigurationService.getConfiguration()); 

     this._ConfigurationService.getConfiguration() 
      .subscribe(
      (data)=> { 
       this.getData = data; 
       console.log(this.getData); 
      }, 
      (error) => console.log("error : " + error) 
     ); 
    } 
} 

このコードはPlunkrで動作していますが、プロジェクトで試してみるとエラーが発生します。私のプロジェクトでAPI値を繰り返すのを助けてください。ありがとうございました。

Answer 1

これは、getData変数にタイプを割り当てていないためです。 getData = [];をgetData: any = [];に変更すると、コードが機能するはずです。あなたはfalseにnoImplicitAnyを設定した場合、あなたは暗黙的変数の型を設定しない場合、それはなります、変数にタイプを割り当てる必要はありません

"compilerOptions": { 
    "noImplicitAny": false 
} 

：他のソリューションは、あなたのtsconfig.jsonファイル内のコンパイラオプションを変更することです自動的にanyに設定されます。

Answer 2

あなたのサービスメソッドgetConfigurationの署名が

(): Observable<Response> 

である。しかし、戻り値の型が正しくありません、観察可能で具現化することをタイプする必要があります。例：

(): Observable<any[]> 

あなたはany特定の型を作ることができます。