How to iterate API data using ngFor in Angular 2

Question

I am new in Angular 2 and I want to display all the API data in tabular form. Here is my working code:

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

But when I am using this code in my files, I am having an error:

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

This code is working in Plunkr but having error when I try it in my project. Please help to iterate the API values in my project. Thank you.

Answer 1

That's because you haven't assigned type to your getData variable. If you change getData = []; to getData: any = []; , your code should work. Other solution is to change compiler options in your tsconfig.json file:

"compilerOptions": {
    "noImplicitAny": false
}

If you set noImplicitAny to false , you don't have to assign type to variables, if you don't implicitly set variable's type, it will be set to any automatically.

Answer 2

The signature of your service method getConfiguration is

(): Observable<Response>

But the return type is not correct, it should be the type that the Observable will materialize. Example:

(): Observable<any[]>

You can make any a specific type.