Question

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

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

但是当我在我的文件中使用此代码时，我遇到了错误：

类型'响应'不能分配给'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 = [];，则您的代码应该有效。其他解决方案是更改tsconfig.json文件中的编译器选项：

"compilerOptions": {
    "noImplicitAny": false
}

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

Answer 2

您的服务方法getConfiguration的签名是

(): Observable<Response>

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

(): Observable<any[]>

您可以将any设为特定类型。

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

2 个答案: