javascript - 如何在 Angular 中绑定(bind)多个插值模板？

Question

我有要显示的 JSON 数据。我创建了一些函数来从中获取特定数据(我找不到更好的方法)。

我也在尝试按顺序显示它们。

例如:第一个函数返回第一个项目的数组，第二个函数返回第二个项目。然后我想按顺序显示它们。首先，我尝试直接从 JSON 执行此操作，但遇到了一些问题，因为它可能嵌套在数组或对象中，因此我无法直接执行此操作。

所以，我正在尝试做这样的事情:

    <div class="head">
  <span class="text">
    {{ head.text }}
  </span>

  <span class="sub">
      {{ head.sub.value }}
    </span>

    <span class="text">
        {{ head.place }}
      </span>
</div>

<!-- for each body render the rest nested items... -->
<div class="body">  
  <span class="info">
    {{ body.id }}
    {{ body.info }}
  </span>
  <div class="extended">
    <span class="text">
      {{ extenden.spl.text }}
    </span>

    <span class="type.value">
        {{ extenden.spl.type.value }}
    </span>
  </div>
</div>

这是 json 的基本结构:

[{
    "id": "XXX",
    "version": 1,
    "head": {
        "text": "Main title",
        "sub": {
            "value": "next"
        },
        "place": "secondary"
    },
    "body": [{
            "id": "XXX1",
            "info": "three little birds",
            "extended": {
                "spl": {
                    "text": "song",
                    "type": {
                        "value": "a"
                    }
                }
            }
        },
        {
            "id": "XXX2",
            "info": [
                "how are you?"
            ],
            "extended": {
                "spl": {
                    "text": "just",
                    "non-type": {
                        "value": "abc"
                    }
                }
            }
        }
    ]
}]

最重要的是!

如果我可以假设 JSON 属性，我知道该怎么做!我的问题是我不知道它是一个数组、对象还是对象数组，所以

<div *ngFor='let item of items'>{{ item }}</div>

不适合我!

Answer 1

您需要尝试不同的方法。您需要循环访问用户对象而不是“用户的属性”。

 <span class="headwordText" *ngFor="let user of users">
            {{ user.first }}, {{ user.last }}
  </span>