Angular2使用* ngFor遍歷對象數組

Question

我有一個Angular2組件，該組件使用Angular的http服務來調用API端點，該端點返回json格式的響應。 響應是一個對象數組，每個對象包含兩個字符串值。

我正在嘗試使用*ngFor="let cluster of apiClusters"遍歷它們，當呈現<h1>{{ cluster }}</h1> ，我得到了[object Object] 。 對我來說，這很有意義，因為我沒有使用點或括號符號來訪問鍵的值。

但是，當我嘗試使用點或括號符號{{ cluster.ClusterName }}不會呈現任何內容。 這不是您應該如何訪問這些值的方法嗎？

另一個類似的帖子也表達了同樣的問題，但是據我所知，他們的問題是他們試圖遍歷匿名對象的對象。 雖然，當對象包含在數組中時，可接受的問題答案使用點表示法訪問鍵之一的值。

這使我認為Angular組件中的代碼可能有問題，但我無法確定它是什么。

ASP.NET Core Web 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

我看不到任何明顯的錯誤，因此需要發揮您的調試技能。

1. 檢查瀏覽器中的“網絡”標簽，並確保該呼叫返回的正是您所期望的。
2. 在模板的底部添加<pre>{{ apiClusters | json }}</pre> <pre>{{ apiClusters | json }}</pre>來查看您設置的返回值的javascript表示形式
3. 在循環中使用{{ cluster | json }} {{ cluster | json }}對數組中的每個值執行相同的操作
4. 在您的組件構造函數中，使用window['C'] = this ，您可以檢出值並在控制台中使用它們來查看發生了什么。 如果要在更改值后看到模板中的更改，則必須注入ApplicationRef並在更改某些內容后調用tick() ，或者通過在應用中執行某些操作來觸發更改檢測。
5. 注釋掉您的api調用，並將數據設置為您希望手動驗證的數據（ this.apiClusters = [{ClusterName:'name',ClusterDescription:'desc'}]; ）