如何在 Angular 中绑定多个插值模板？

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>

Answer 2

你的问题不是很清楚，但如果我理解正确，这就是解决方案

在你的 ts 文件中：

public fristnames : string[];
public lastnames : string[];

OnInit()
{
    firstnames = headwordFirst();
    lastnames =  headwordLast();
}

现在在您的 html 文件中：

<div class="headwordDiv">
    <span class="headwordText" *ngFor="let firstname of firstnames ;let i = index">
        {{ firstname }} {{ lastnames[i] }}
    </span>
</div>

希望对你有帮助

Answer 3

Angular 是一个不会影响样式或布局的分组元素，因为 Angular 不会将其放入 DOM。

<div *ngFor="let d of demo; let i = index">
  <span class="text">
     {{ d.head.text }}
  </span>
  <span class="sub">
      {{ d.head.sub.value }}
    </span>

    <span class="text">
        {{ d.head.place }}
      </span>
<ng-container *ngFor="let body of d.body">

  <span class="info">
    {{ body.id }}
    {{ body.info }}
  </span>
    <span class="text">
      {{ body.extended.spl.text }}
    </span>
    <span class="type.value">
        {{ body.extendend.spl.type.value }}
    </span>
</ng-container>
</div>