Question

请注意，关于同一错误的其他问题也无济于事，因为我使用不同的方式来获取数据。

我想从API中获取一些数据，并使用Angular在页面中显示它们。 http请求将获得一系列项目。所以这是projects.component.ts：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Project {

    alias:Array<string>;
    apps:Array<string>;
    description: string;
    id:string;
    name:string;

}

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css']
})


export class ProjectsComponent {



    title:string = "Projects";
    dataProjects: Array<Project>;

    constructor(private httpClient:HttpClient){  }

    getProjects() {
    this.httpClient.get<Array<Project>>("http://company.com/v1/api/projects")
    .subscribe(  data  => { this.dataProjects = data; } )
  }

}

这是projects.component.html中的视图：

  <tbody>
    <tr *ngFor="let proj of dataProjects">
      <td> {{ proj.name }}  </td>
      <td>{{ proj.description }}  </td>
    </tr>
  </tbody>

这是我得到的错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

如何返回项目数组？

编辑：

API输出示例：

{
  "results": [
    {
      "alias": [
        "project"
      ], 
      "apps": [], 
      "description": "Applications natives", 
      "id": "project", 
      "name": "project"
    }
  ]
}

Answer 1

我认为您的方法getProjects从未被调用。这意味着dataProjects是null

尝试

<tr *ngFor="let proj of dataProjects?.results">
      <td> {{ proj.name }}  </td>
      <td>{{ proj.description }}  </td>
    </tr>

Answer 2

我认为您收到此问题的原因是因为当angular尝试迭代该变量时尚未分配该变量，因此它还没有javascript类型。相反，您应该保存可观察对象，并在html-template中使用异步管道。

在打字稿中：

    "«LIB${1|(,(a,(b,(c|})»",

在html中：

dataProjects$: Observable<Array<Project>>

getProjects() {
    this.dataProjects$ = this.httpClient.get<Array<Project>>("http://company.com/v1/api/projects")
}

Answer 3

这对我有用：

<tr *ngFor="let proj of dataProjects.results ">
  <td> {{ proj.name }}  </td>
  <td>{{ proj.description }}  </td>
</tr>

Answer 4

请勿使用 *ngFor="let proj of dataProjects?.results"

原因：：您已经将dataProjects的类型定义为Array<Project>

因此，this.dataProjects = data;违反了类型，而不是使用this.dataProjects = data. results;

您需要做的就是

getProjects() {
    this.httpClient.get<Array<Project>>("http://company.com/v1/api/projects")
    .subscribe(  data  => { this.dataProjects = data.results; } ) // <--- Change here
}

无需在template端进行任何更改。

错误NgFor仅支持绑定到数组等Iterables

4 个答案: