Angular2 Iterate Over Array of Objects Using *ngFor

Question

I have an Angular2 component that uses Angular's http service to call an API endpoint, which returns a json formatted response. The response is an array of objects, each containing two string values.

I'm trying to iterate over the them using the *ngFor="let cluster of apiClusters", and when this <h1>{{ cluster }}</h1>is rendered, I get [object Object]. This, to me, makes sense since I'm not using dot or bracket notation to access the key's value.

However, when I try to use dot or bracket notation {{ cluster.ClusterName }} nothing is rendered. Isn't this how you should access those values?

Another similar post expressed having the same issue, but their problem, as I understand it, was that they were trying to iterate over an object of anonymous objects. Although, the accepted answer to the question uses dot notation to access the value of one of the keys, when the objects were contained in an array.

This leads me to think it might be an issue with the code in the Angular component, but I can't determine what it is.

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 Component:

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 Component Template

 <!-- 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

First, try

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

and see what you are getting.

Depending on how the ASP.NET is set up, it may be changing the case. So it may require using

{{ cluster.clusterName }}

(lower case 'c')

Answer 2

I don't see any obvious errors, so your debugging skills need to come into play.

1. Check the network tab in your browser and make sure the call is returning exactly what you expect.
2. At the bottom of your template add <pre>{{ apiClusters | json }}</pre> to see the javascript representation of the return value you set
3. In your loop use {{ cluster | json }} to do the same for each value in the array
4. In your component constructor use window['C'] = this and you can check out the values and play with them in the console to see what is going on. If you want to see changes in your template after changing values you'll have to inject ApplicationRef and call tick() after changing something, or trigger change detection by performing some action in your app.
5. Comment out your api call and set the data to what you expect manually to verify it's working (i.e. this.apiClusters = [{ClusterName:'name',ClusterDescription:'desc'}];)