如何在Angular 2中使用ngFor迭代API數據

我是Angular 2中的新成員，我想以表格形式顯示所有API數據。這是我工作的代碼：如何在Angular 2中使用ngFor迭代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值。謝謝。

來源

2017-01-17 vinayofficial

你能分享你有這個錯誤的代碼行嗎？不是在運動中，而是在你的代碼中。 – echonax

打印響應和檢查格式，因爲你可能沒有得到響應數組。你可能會得到響應對象中的任何[] – Sreemat

@echonax模塊構建失敗：Error：app.component.ts（20,17）：Type'Response '不可分配爲鍵入任何[]' – vinayofficial

這是因爲您尚未將類型指定給您的getData變量。如果您將getData = [];更改爲getData: any = [];，那麼您的代碼應該可以工作。其他的解決辦法是改變你的tsconfig.json文件的編譯器選項：

"compilerOptions": { 
    "noImplicitAny": false 
}

如果設置noImplicitAny到false，你沒有指定類型的變量，如果你不隱式設置變量的類型，這將是自動設置爲any。

來源

2017-01-17 13:26:42

@vinayofficial，但這並不能完全解決問題，因爲'getConfiguration'的簽名仍不*實際上反映它返回的內容*。 – jonrsharpe

您的服務方法getConfiguration的簽名是

(): Observable<Response>

但返回類型是不正確的，應該是可觀察到的一定會實現的類型。例如：

(): Observable<any[]>

您可以any一個特定的類型。

來源

2017-01-17 13:32:17 Igor

@vinayofficial - 我很高興它爲你工作。這是做到這一點並保持類型安全的正確方法。如果您知道您要返回的類型，通常不推薦投射到「任何」。 – Igor

如何在Angular 2中使用ngFor迭代API數據

回答

相關問題