Как правильно построить неупорядоченный список в Angular, используя ngFor

Question

В моем приложении Angular 7 у меня есть следующий компонент, который получает массив JSON:

@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) => {
         this.indices = data;
       });
  };

}

При выполнении «this.indices» присваивается следующее:

[ {        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"
} ]

Мой HTML выглядит следующим образом:

<h2>Indices</h2>
<ul>
  <li *ngFor="let item of indices"></li>
  <span >{{item.index}}</span> {{item.index}}
</ul>

Когда он запускается, все, что я получаю в браузере, это список из двух пустых маркеров.

Что я должен изменить, чтобы отобразитьсодержание item.index?

Answer 1

Ваш диапазон находится за пределами *ngFor, что делает невозможным доступ к элементу.

Попробуйте

<h2>Indices</h2>
<ul>
  <li *ngFor="let item of indices">
     <span>{{item.index}}</span> {{item.index}}
  </li>
</ul>