Question

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

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

但是，当我尝试使用点或括号表示{{ cluster.ClusterName }}时，不会呈现任何内容。这不是你应该如何访问这些值吗？

另一个similar post表示有同样的问题，但据我所知，他们的问题是他们试图迭代匿名对象的对象。虽然，当对象包含在数组中时，问题的接受答案使用点表示法来访问其中一个键的值。

这让我觉得它可能是Angular组件中代码的问题，但我无法确定它是什么。

ASP.NET Core Web API Controller：

[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 }}

（小写＆＃39; c＆＃39;）

Answer 2

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

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

Angular2使用* ngFor

2 个答案: