Angular2 使用 *ngFor 遍历对象数组

Question

我有一个 Angular2 组件，它使用 Angular 的 http 服务来调用 API 端点，returns 一个 json 格式的响应.响应是一个对象数组，每个对象包含两个字符串值。

我正在尝试使用 *ngFor="let cluster of apiClusters" 对它们进行迭代，当呈现此 <h1>{{ cluster }}</h1> 时，我得到 [object Object]。这对我来说是有道理的，因为我没有使用点或括号表示法来访问键的值。

但是，当我尝试使用点或括号表示法时 {{ cluster.ClusterName }} 没有任何渲染。这不是您访问这些值的方式吗？

另一个表示有同样的问题，但据我了解，他们的问题是他们试图遍历匿名对象的对象。虽然，当对象包含在数组中时，该问题的公认答案使用点表示法来访问其中一个键的值。

这使我认为 Angular 组件中的代码可能存在问题，但我无法确定它是什么。

ASP.NET 核心网络 API 控制器：

[HttpGet]
    public IActionResult Get()
    {

        var clusterData = new[] 
        {
            new { ClusterName = "Agriculture, Food, and Natural Resources", ClusterDescription = "hello" },
            new { ClusterName = "Architecture and Construction", ClusterDescription = "hi" },
            new { ClusterName = "Arts, Audio/Video Technology, and Communications", ClusterDescription = "tbd" },
            new { ClusterName = "Business, Management, and Administration", ClusterDescription = "tbd" },
            new { ClusterName = "Education and Training", ClusterDescription = "tbd" },
            new { ClusterName = "Finance", ClusterDescription = "tbd" },
            new { ClusterName = "Government and Public Administration", ClusterDescription = "tbd" },
            new { ClusterName = "Health Science", ClusterDescription = "tbd" },
            new { ClusterName = "Hospitality and Tourism", ClusterDescription = "tbd" },
            new { ClusterName = "Human Services", ClusterDescription = "tbd" },
            new { ClusterName = "Information Technology", ClusterDescription = "tbd" },
            new { ClusterName = "Law, Public Safety, Corrections, and Security", ClusterDescription = "tbd" },
            new { ClusterName = "Manufacturing", ClusterDescription = "tbd" },
            new { ClusterName = "Marketing, Sales, and Service", ClusterDescription = "tbd" },
            new { ClusterName = "Science, Technology, Engineering, and Mathematics", ClusterDescription = "tbd" },
            new { ClusterName = "Transportation, Distribution, and Logistics", ClusterDescription = "tbd" }
        };

        return new JsonResult
        (
            clusterData
        );

    }

Angular2 个分量：

import { Component, OnInit, PipeTransform, Pipe } from '@angular/core';
import { Http } from '@angular/http';

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

})

export class AppComponent implements OnInit {

    constructor(private _httpService: Http) { }

    apiClusters: { ClusterName: string, ClusterDescription: string }[] = [];

    ngOnInit() {
        this._httpService.get('/api/clusters').subscribe(values => {
            this.apiClusters = values.json() as { ClusterName: string, 
            ClusterDescription: string }[];
        });
    }

}

HTML 组件模板

 <!-- Career Cluster Component -->
<main class="container justify-content-center mt-5 mb-5 flex-grow w-75">
  <div *ngFor="let cluster of apiClusters">
    <a href="#">
      <div class="card">
        <div class="header" id="bg-img"></div>
          <div class="content">
            <h1>{{ cluster.ClusterName }}</h1>
            <p class="cluster-description">
              Blurp about industry cluster. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum nisi sed efficitur scelerisque. Nullam sollicitudin ultricies maximus. Vestibulum eu molestie dui, eu lacinia turpis. Pellentesque rutrum
              magna ac risus.
            </p>
          </div>
        </div>
      </a>
    </div>
  </main>
  <!-- Career Cluster Component End-->

Answer 1

首先，尝试

<h1>{{ cluster | json }}</h1>

看看你得到了什么。

根据 ASP.NET 的设置方式，它可能会改变大小写。所以它可能需要使用

{{ cluster.clusterName }}

（小写'c'）

Answer 2

我没有看到任何明显的错误，所以您的调试技巧需要发挥作用。

检查浏览器中的“网络”选项卡，确保通话 return 完全符合您的预期。
在您的模板底部添加 <pre>{{ apiClusters | json }}</pre> 以查看您设置的 return 值的 javascript 表示形式
在您的循环中使用 {{ cluster | json }} 对数组中的每个值执行相同的操作
在您的组件构造函数中使用 window['C'] = this，您可以检查这些值并在控制台中使用它们来查看发生了什么。如果您想在更改值后查看模板中的更改，则必须在更改某些内容后注入 ApplicationRef 并调用 tick()，或者通过在您的应用中执行某些操作来触发更改检测。
注释掉您的 api 调用并将数据手动设置为您期望的值以验证它是否正常工作（即 this.apiClusters = [{ClusterName:'name',ClusterDescription:'desc'}];）

Angular2 使用 *ngFor 遍历对象数组

Angular2 Iterate Over Array of Objects Using *ngFor

angular2-template

asp.net-core-webapi

angular