如何在Angular 2中使用ngFor迭代API数据

Question

我是Angular 2的新手，我想以表格形式显示所有API数据。 这是我的工作代码：

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

但是，当我在文件中使用此代码时，出现错误：

类型“ Response”不能分配给类型“ 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 = []; to getData: any = []; ，您的代码应该可以正常工作。 其他解决方案是更改tsconfig.json文件中的编译器选项：

"compilerOptions": {
    "noImplicitAny": false
}

如果将noImplicitAny设置为false ，则不必为变量分配类型，如果不隐式设置变量的类型，则它将自动设置为any类型。

Answer 2

服务方法getConfiguration的签名是

(): Observable<Response>

但是返回类型不正确，它应该是Observable将实现的类型。 例：

(): Observable<any[]>

您可以指定any特定类型。