ngFor 中對象的 Angular/Typescript 顯示列表

Question

我正在使用 angular 7 並且我正在顯示一些數據。

以下是零件：

myData: any;

myData 的內容是：

{
    "id" : "1",
    "name" : "Name 1",
    "stuff" : [ 
        {
            "cmd" : "something here"
        }, 
        {
            "cmd" : "something else here"
        }
    ]
}

然后是我的 app.component.html 我有：

<ul class="code-editor-options-menu" *ngFor="let dat of myData">
  <li>
    <span>{{dat.name}}</span>
    <span aria-hidden="true">{{dat.stuff.cmd}}</span>
  </li>
</ul>

有了這個： {{dat.stuff.cmd}}我正在嘗試列出東西中的所有項目。

我怎樣才能做到這一點？

Answer 1

name不是東西，所以你不能迭代

檢查以下代碼段： 您的示例

零件：

  myData = {
    "id": "1",
    "name": "Name 1",
    "stuff": [
      {
        "cmd": "something here"
      },
      {
        "cmd": "something else here"
      }
    ]
  }

視圖：

<ul class="code-editor-options-menu" *ngFor="let dat of myData.stuff">
  <li>
    <span>{{myData.name}}</span>
    <span aria-hidden="true">{{dat.cmd}}</span>
  </li>
</ul>

Answer 2

你必須遍歷dat.stuff使用*ngFor 。

您可以使用：

 <span aria-hidden="true" *ngFor="let stuff of dat.stuff">{{stuff.cmd}}</span>

工作示例：

https://stackblitz.com/edit/angular-b9wb26