javascript - ¿Cómo enlazar múltiples plantillas de interpolación en Angular?

Tengo datos JSON que quiero mostrar. Creé algunas funciones para obtener datos específicos de ellos (no pude encontrar una mejor manera).

También estoy intentando mostrarlos en orden.

Por ejemplo: La primera función devuelve un array de los primeros elementos, la segunda función, los segundos elementos. Luego quiero mostrarlos en orden. Primero, intenté hacer eso directamente desde el JSON, pero tuve algunos problemas porque podría estar anidado en un array u objeto, por lo que no podía hacerlo directamente.

Entonces, estoy intentando hacer algo como esto:

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

y aquí está la estructura básica del 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"
                    }
                }
            }
        }
    ]
}]

¡Y lo más importante!

¡Sé cómo hacer eso si puedo asumir las propiedades de JSON! Mi problema es que no puedo saber si va a ser un array o un objeto o un array de objetos, así que

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

¡no funciona para mí!

Respuesta #1

Necesitas probar un enfoque diferente. Necesitas hacer un bucle sobre un objeto de usuario en lugar de los "propiedades del usuario".

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

Respuesta #2

Tu pregunta no es muy clara, pero si entendí bien, esta es la solución

En tu archivo ts:

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

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

Ahora en tu archivo html :

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

Espero que ayude