Angular 6 - 使用 *ngFor 显示数据的问题（数据未显示）

【问题标题】：Angular 6 - Issue displaying data with *ngFor (data not showing)Angular 6 - 使用 *ngFor 显示数据的问题（数据未显示）
【发布时间】：2018-05-14 22:43:20
【问题描述】：

我有一些看起来像这样的数据：

在我的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

我该如何解决这个问题？

【问题讨论】：

你能展示一下console.log(myData) 打印的内容吗？
Console.log 会显示我在问题中提供的数据
使用插值在 html 页面中打印 myData 的数据查看数据对象是什么 Like
{{data}}

标签： angular typescript angular6

【解决方案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>

【讨论】：

我添加了来自控制台的数据屏幕截图，以便您看到它看起来更好
试试<li *ngFor="let data of myData.listResponse.instance">{{data.@attributes.id}}</li>
它不喜欢@attributes 中的@ 字符
当我将 app.component.ts 代码更改为：this.myData = obj.listResponse.instance;没有错误，但空的
又回来了

还是不够。可以console.log(obj.listResponse.instance[0])吗？

【解决方案2】：

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

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

这是错误的，必须是这样。首先检查你的数组或数组对象。

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

在 Html 文件中

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

【讨论】：

我添加了来自控制台的数据屏幕截图，以便您看到它看起来更好

【解决方案3】：

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

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

【讨论】：