javascript - Angular'da birden fazla interpolasyon şablonunu nasıl bağlarım?

Göstermek istediğim JSON verilerim var. İçinden belirli verileri almak için birkaç fonksiyon oluşturdum (daha iyi bir yol bulamadım).

Ayrıca onları sırayla göstermeye çalışıyorum.

Örneğin: İlk fonksiyon ilk öğelerin bir dizisini döndürüyor, ikinci fonksiyon ise ikinci öğeleri. Sonra bunları sırayla göstermek istiyorum. Öncelikle bunu doğrudan JSON'dan yapmayı denedim ama birkaç sorun yaşadım çünkü bir dizide veya nesnede iç içe olabilir, bu yüzden doğrudan yapamadım.

Yani, böyle bir şey yapmaya çalışıyorum:

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

ve işte json'un temel yapısı:

[{
    "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"
                    }
                }
            }
        }
    ]
}]

Ve en önemli şey!

Bunu nasıl yapacağımı biliyorum, eğer JSON özelliklerini varsayabilirsem! Sorunum, bunun bir dizi mi yoksa nesne mi ya da nesnelerin dizisi mi olacağını bilememem.

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

Benim için çalışmaz!

Cevap #1

Farklı bir yaklaşım denemeniz gerekiyor. "Kullanıcının özellikleri" yerine bir kullanıcı nesnesi üzerinde döngü yapmanız gerekiyor.

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

Cevap #2

Sorunuz çok net değil ama doğru anladıysam çözüm bu

ts dosyanızda:

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

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

Şimdi HTML dosyanızda :

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

Umarım yardımcı olur

İlgili makaleler