Ekranda [Nesne Nesnesi] yerine JSON gösterimi nasıl görüntülenir?

Beta sürümü ile bir AngularJS 2 uygulaması yapıyorum. Sayfamdaki bir nesnenin JSON temsilini göstermek istiyorum, ancak bu gösteriyor [Object Object]ve göstermiyor {key1:value1 ....}

Kullanabileceğim bileşenden:

get example() {return JSON.stringify(this.myObject)};

ve sonra şablonda:

{{example}}

ama bir dizi nesnem varsa ve bu nesnelerin bir listesini yazdırmak istersem, bunu nasıl yapabilirim?

Kullanımı:

<ul>
   <li *ngFor="#obj of myArray">{{obj}}</li>
</ul>

şunun gibi bir şeyle sonuçlanır:

- [Nesne Nesne]
- [Nesne Nesne]
- [Nesne Nesne]
- [Nesne Nesne]

ve bunun gibi. Bunları JSON olarak göstermenin bir yolu var mı?

Web uygulamanızdaki bir nesnenin içinde neye sahip olduğunuzu görmek istiyorsanız , bir bileşen HTML şablonundaki json borusunu kullanın, örneğin:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Angular 4.3.2 kullanılarak test edilmiş ve geçerlidir.

Açısal boru json kullanabiliriz

{{ jsonObject | json }}

JSON Nesnesinde döngü yapmak için: Angluar'ın (6.0.0+) sürümünde artık boruyu sağlıyorlar keyvalue:

<div *ngFor="let item of object| keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

AYRICA OKUYUN

Sadece JSON'u görüntülemek için

{{ object | json }}

Nesne içeriğini JSON olarak boşaltmak, kullanmadan elde edilebilir ngFor. Misal:

Nesne

export class SomeComponent implements OnInit {
    public theObject: any = {
        simpleProp: 1,
        complexProp: {
            InnerProp1: "test1",
            InnerProp2: "test2"
        },
        arrayProp: [1, 2, 3, 4]
    };

Biçimlendirme

<div [innerHTML]="theObject | json"></div>

Çıktı (daha iyi okunabilirlik için bir güzelleştiriciden geçer, aksi takdirde tek bir satırda çıkar)

{
  "simpleProp": 1,
  "complexProp": {
    "InnerProp1": "test1",
    "InnerProp2": "test2"
  },
  "arrayProp": [
    1,
    2,
    3,
    4
  ]
}

Ayrıca daha büyük JSON verilerini daha okunaklı görüntüleyen bir JSON biçimlendirici ve görüntüleyici keşfettim (JSONView Chrome uzantısına benzer): https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

Değerleri almanın 2 yolu vardır: -

1. Noktalı notasyonu (obj.property) kullanarak nesnenin özelliğine erişin.
2. Örneğin obj ["özellik"] gibi anahtar değerini ileterek nesnenin özelliğine erişin

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Başkalarının yanıtlarını yeni sözdizimi ile güncelleme:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Nesne dizisine sahipseniz ve bunları bileşen içinde seri durumdan çıkarmak istiyorsanız

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

sonra şablonda

<ul>
   <li *ngFor="obj of example">{{obj}}</li>
</ul>

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });