title: How to properly build unordered list in Angular using ngFor
body: <p>In my Angular 7 app, I have the following component, which retrieves a JSON array:</p>
  
  <pre><code>@Component({
    selector: 'app-indices-get',
    templateUrl: './indices-get.component.html',
    styleUrls: ['./indices-get.component.css']
  })
  export class IndicesGetComponent implements OnInit {
  
    indices: any[];
  
    constructor(private is: IndexService) { }
  
    ngOnInit() {
       this.listAllIndices();
    }
  
     listAllIndices = function() {
       console.log('indices-get.component.ts');
       this.is
         .getIndex()
         .subscribe((data: Index) =&gt; {
           this.indices = data;
         });
    };
  
  }
  </code></pre>
  
  <p>When executed, the 'this.indices' is assigned the following:</p>
  
  <pre><code>[ {        docs.count: “0”,     docs.deleted: “0”,     health: "yellow”,     index: "userindex2”,     pri: “1”,     pri.store.size: "283b”,     rep: “1”,     status: "open”,     store.size: "283b”,     uuid: "oSjIstqAQN21DNIgl9VjjQ”,     __proto__: Object
      },
      {      docs.count: “0”,     docs.deleted: “0”,     health: "yellow”,     index: "userindex1”,     pri: “1”,     pri.store.size: "283b”,     rep: “1”,     status: "open”,     store.size: "283b”,     uuid: "HhtHVp6vS1S4R4E-b5PKzQ"
  } ]
  </code></pre>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;h2&gt;Indices&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let item of indices"&gt;&lt;/li&gt;
    &lt;span &gt;{{item.index}}&lt;/span&gt; {{item.index}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>When this runs, all I get in the browser is a list of two empty bullets.</p>
  
  <p>What should I change in order to display the content of item.index?</p>