Разбор объекта JSON в Angular 9 и возврат вывода в шаблон HTML с помощью {{item | json}}

Question

Я новичок в Angular, я пытался использовать HttpClientModule, вызывая URL-адрес из службы и вставляя его в мой компонент. Я вызываю метод и подписываюсь на него ... теперь в файле шаблона HTML я получаю сообщения об ошибках и в консоли, а в HTML.

dashboard.component.ts

нет ответа.

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';     


@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {


 Items:any;

 constructor(private apiService : ApiService ) { }


 ngOnInit(){

    this.apiService.getCats().subscribe(data => 
       this.Items = data);
   }
 }

dashboard.component. html

<div>
     <h1>
         Transactions:
     </h1>

     <li *ngFor="let item of Items | async as list">
           <p {{ item | json}} ></p> 
     </li>
 </div>

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';  

@Injectable({
  providedIn: 'root'
})

export class ApiService {


  constructor(private httpClient: HttpClient) { }

  private url = 'http://172.20.10.5:8888/catpeople/cats';

getCats() {
   return this.httpClient.get(this.url); 
  } 
}

В консоли браузера появляется следующая ошибка.

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Я также получаю этот журнал ... Я знаю, что это что-то не так в моем коде Angular, а не в моих конечных точках или restAPI, потому что я могу использовать почтальон и нажимать URL и все работает отлично.

XHR finished loading: GET "http://172.20.10.5:8888/catpeople/cats".

Вот JSON, с которым я пытаюсь работать:

{
    "transactionType": {
        "value": 1052407993,
        "ns": -1024444599
    },
    "payload": [],
    "uuid": "44fe6aef-72e8-4c0f-9158-80925f705694",
    "interrupted": false,
    "triggeringMessage": {
        "transactionType": {
            "value": 1052407993,
            "ns": -1024444599
        },
        "payload": null,
        "uuid": "cc8f2452-7084-43f0-83c2-3d7a10a1c2b6",
        "interrupted": true
    },
    "event": "transactionComplete",
    "status": "INTERRUPTED",
    "nodeName": "node"
}

Answer 1

Вы рядом. Удалите директиву *ngFor, поскольку она работает только с коллекцией, например с массивом. Также вам не нужен async канал, поскольку вы не печатаете асинхронные данные. Удалите *ngFor и просто выполните

<p>{{ Items | json }}</p>

Рабочий пример: Stackblitz

Обновление: Как упоминалось @ developer033, метод подписки вместо этого можно удалить AsyncPipe.

dashboard.component.ts:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';     

@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {
 Items:any;
 public catSubscription: any;

 constructor(private apiService : ApiService ) { }

 ngOnInit() {
     this.catSubscription = this.apiService.getCats();
   }
 }

dashboard.component. html

<div>
  <h1>
    Transactions:
  </h1>
  <ng-container *ngIf="catSubscription | async as transactions">
    <p {{ transactions | json }} ></p> 
  </ng-container >
</div>

И распечатать полезную нагрузку массив с использованием *ngFor:

<div>
  <h1>
    Transactions:
  </h1>
  <ng-container *ngIf="catSubscription | async as transactions">
    <p>{{ transactions | json }}</p>
    <p>Payloads:</p>
    <li *ngFor="let pay of transactions.payload">
      <p {{ pay }} ></p> 
    </li>
  </ng-container >
</div>

Answer 2

Канал asyn c подписывается на Observable или Promise и возвращает последнее выданное им значение.

В вашем случае вы уже подписаны на Observable, и он вам не нужен.

Более подробная информация в официальном до c здесь