Как отобразить [объект объекта] на угловой интерфейс?

Question

Я пытаюсь отобразить ответ моего серверного API http://localhost:3000/api/radar_life_cycle на угловом интерфейсе, но каким-то образом я получаю вывод в виде [object Object], console.log в ответе показывает правильный объект, но не в интерфейсе, что я Мне не хватает каких-либо указаний о том, как отобразить объект в интерфейсе пользователя?

HTML

<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="get_radar_lifecycle_data()">Search</button>
<p>{{newPost}}</p>

component.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Subject } from "rxjs";
import { map } from 'rxjs/operators';

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


export class RadarInputComponent  {

constructor(private http: HttpClient) {}
newPost = '';
get_radar_lifecycle_data(){
     this.http.get('http://localhost:3000/api/radar_life_cycle',{params:this.enteredValue}).subscribe(response => {
     console.log(response);
      this.newPost = response
      });
}

}

ответ: -

{message: "Posts fetched successfully!", posts: Array(1)}

ТЕКУЩИЙ ВЫХОД: -

Answer 1

Ссылаясь на {message: "Posts fetched successfully!", posts: Array(1)}!

Вы можете использовать *ngFor для отображения массива, например:

<div *ngFor="let item of newPost?.posts">
   {{ item.milestone }} 
</div>

или для отображения свойств:

{{ newPost?.message }}

Редактировать:

Изменить:

newPost = '';

на:

newPost: any;

, и у вас уже есть доступ к объекту этого массива, так что вам просто нужноделать:

{{ item.milestone }}

Working Demo

Answer 2

Вам необходимо проверить структуру вашего объекта по json pipe

Показать свойство вашего объекта по ngFor, потому что результат возврата Array.

https://stackblitz.com/edit/angular-d17ggk

Answer 3

Вы можете использовать встроенную трубу JSON, имеющуюся в Angular, которая включена в @angular/common и импортируется с BrowserModule или CommonModule:

<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="get_radar_lifecycle_data()">Search</button>
<p>{{newPost | json}}</p>

Для получения дополнительной информации о трубе,проверить API JsonPipe.