tengo un problema con angular 5. He encontrado alguna pregunta parecida pero no he conseguido solucionar nada. La cosa es que tengo un servicio http que estoy consumiendo desde angular con una petición get, la cual me devuelve un Json. Lo que me pasa es que no consigo mostrar esta información por pantalla.
Este seria el metodo que hace la llamada al servicio:
getPosts(): Observable<Post[]>{
const httpOptions = {
withCredentials: true
};
return this.http.get<Post[]> (url, httpOptions);
}
La clase Post:
export class Post {
constructor(
public error: string,
public mensaje: string,
public datos: string
) {}
}
La llamada al método:
allPosts: Post[] = [];
constructor( private http:HttpClient, private postService: PostService){
this.postService.getPosts().subscribe(posts =>{
this.allPosts = posts;
console.log(posts);
});
}
Código Html: Es en esta parte donde tengo el problema ya que si en el html pongo:
{{allPosts| json}}
Me aparece todo el JSon en la pantalla. Pero si intento coger la información por separado consigo un null o un error. He probado con lo siguiente:
<div *ngFor="let posts of allPosts">
<h1>{{posts.mensaje}}</h1>
<p>{{posts.error}}</p>
</div>
Error:
'Cannot read property 'mensaje' of undefined'
Esto me da el error de arriba, pero si le añado un signo de interrogación '?'
{{posts?.mensaje}}
No me aparece ningún error pero en pantalla obtengo un null.
No se si me habré explicado muy bien, la cosas es que soy nuevo en esto de angular y ando un poco perdido...
El Json devuelve lo siguiente:
{"error":"0","mensaje":"","datos":{"versionesOperativas":["1.0","2.0"],"servidores":{"mc18608":"1524343965"}}}