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

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

Answer 2

因为我猜你创建了类似这样的数组对象

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

这是错误的，必须像 this.First 检查你的数组或数组对象。

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

并在 Html 文件中

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

Answer 3

像这样将数据提供给 myData 变量==>

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

Angular 6 - Issue displaying data with *ngFor (data not showing)