如何将从angular接收到的数据传递到html前端？

Question

this is my angular service:

@Injectable()
 export class ApiService {
  private get_msg_url: string = "http://localhost:3000/getmessages";
     constructor(private http:HttpClient) { }

     getMessage(): Observable<IPosts> {
      return this.http.post<IPosts>(this.get_msg_url,{"data":"data1"});
    }
   }

this is my message.component.ts :

export class MessagesComponent implements OnInit {
     data = [];
     iposts: IPosts[];
     constructor(private apiSerivce: ApiService) {
     }
     getMessage(): void {
         this.apiSerivce.getMessage()
             .subscribe(data1 => this.data.push(data1));
     }
     ngOnInit(): void {
         this.getMessage();
         console.log(this.data);
     }
 }

this is my posts.ts:

export interface IPosts {
    timestamp : number;
    message_content : string;
    message_link :string;
    tags : string[] ;
}

this is messsage.component.html:

<p>Json data {{data}} </p>

whenever the code is run i can see the required data in console of chrome but there is no data shown on page. the data received on console is of form:

[]
    0: 
    message: Array(3)
        0: {timestamp: 1522072833748, 
        tags: Array(2), _id: "5aacb7cc0281b558debacf26", 
       message_link:"String"
    }}

Answer 1

the problem is, that you try to print an array, instead of the elements.

<p>Json data {{data}} </p>

change this to something like this:

<p *ngFor="let element of data; index as i">
  Json data #{{i}}: {{element]]
</p>

Answer 2

As I can see, data is an array. you can display the raw content of an array with the pipe json : {{data | json}} {{data | json}}
However I am not sur what you want to do with a json displayed in your html.

Answer 3

The problem is your output data is an array, not an element.
Try something like this,

<ul *ngFor="let element of data">
  <li>{{element}}</li>
</ul>