Angular 6 - ошибка отображения данных с помощью * ngFor (данные не отображаются)

Question

У меня есть некоторые данные, которые выглядят так:

На моем app.component.html У меня есть это:

<ul>
  <li *ngFor="let data of myData">{{data.id}}</li>
</ul>

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

На моем app.component.ts у меня есть:

myData;

, а затем:

this.myData = obj; // Obj contains the data

Как я могу это исправить?

Answer 1

Потому что, я полагаю, вы создали объект массива примерно так

 myData = [
    {
      '@attributes:': 'id:1'
    },
    {
      '@attributes:': 'id:2'
    }
  ];  

Это неправильно и должно быть так. Сначала проверьте ваш массив или массив Object.

 myData = [
    {
      attribute: 'abc',
      id: 1
    },
    {
      attribute: 'bcs',
      id: 2
    }
  ];

и в HTML-файле

<ul>
  <li *ngFor="let data of myData">{{data.id}}</li>
</ul>

Answer 2

Передать данные в переменную myData следующим образом ==>

    this.myService.myFunction().subscribe(res=>
    this.myData = res['listResponse']['@attributes']['instance']
     )}

Answer 3

<ul *ngFor="let data of myData">
  <li>{{data.id}}</li>
</ul>

Вы создаете несколько <ul> элементов, в то время как вы, вероятно, хотите иметь несколько <li> (list item) элементов:

<ul>
  <li *ngFor="let data of myData">{{data.id}}</li>
</ul>