node.js - 如何在 Angular UI 上显示 [object Object]？

Question

我试图在 Angular UI 上显示我的后端 api http://localhost:3000/api/radar_life_cycle 的响应，但不知何故我得到的输出为 [object Object] ，响应中的 console.log 显示了正确的对象，但在 UI 上没有显示，我错过了什么？关于如何在 UI 上显示对象的任何指导？

html

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

组件.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

您需要通过json pipe检查您的对象结构

通过 ngFor 显示您的对象属性，因为结果返回 Array。

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