Угловые непечатаемые значения JSON в html

Question

Я использую Angular 6 и Slim, я могу получить правильные значения JSON, напечатанные в консоли.Но когда я пытаюсь распечатать эти значения в моем html-формате, никакого значения для печати не получается.

Это мой component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { PostService } from '../../services/post.service';
import { Post } from '../../models/post';

@Component({
    selector: 'category-inf',
    templateUrl: './cat-inf.component.html',
    providers: [PostService]
})
export class catInfComponent{
    public tittle = 'Post tittle';
    public posts: Post[];

    constructor (
        private _route: ActivatedRoute,
        private _router: Router,
        private _postService: PostService
        ){
        this.tittle = 'Category virtualization';
    }
    ngOnInit(){
        console.log ('Category virtualization loaded');


    this._postService.getPost().subscribe(
        result =>{
                if(result.code != 200){
                    console.log(result);
                }else{
                    this.posts = result.data;
                    console.log(result);    
                }
            },
            error =>{
                console.log (<any>error);
            }

        );
    }
}

Это component.html

 <h2>{{tittle}}</h2>
<hr/>
<div *ngIf="!posts">
    <p>Loading post...</p>
</div>
<div *ngIf="posts">
    HOla

    <ul>
        <li *ngFor="let post of posts">
            <strong>post</strong>
        </li>
    </ul>
</div>

И почтовый сервис

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
//  npm install rxjs@6 rxjs-compat@6 --save
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Post } from '../models/post';
import { GLOBAL} from './global';

@Injectable()
export class PostService{
    public url: string;

    constructor (
        public _http: Http
        ){
        this.url = GLOBAL.url;
    }

    getPost(){
        return this._http.get(this.url+'posts').map (res => res.json());
    }
}

Любая помощь будет признательна, я застрял здесь на несколько часов и не вижу, в чем проблема.

Спасибо за помощь.

Answer 1

Из вашего комментария:

{
    "status": "success",
    "code": "200",
    "message": [{...}, ...]
}

... мы видим, что ваш ответ не содержит свойства data, поэтому, если бы вы использовали консольный журнал result.data в вашем обратном вызове, это было бы undefined. То, что вы ищете, это result.message, так как ваш массив находится внутри этого:

this._postService.getPost().subscribe(result =>{
  if(result.code != 200){
    console.log(result);
  } else {
     // here!
     this.posts = result.message;
     console.log(this.posts);    
   }
  },
   error =>{
     console.log (<any>error);
   });
}

Также вы должны определенно перейти к HttpClient вместо использования старого Http. И затем упоминается в другом ответе, вам нужно использовать интерполяцию в представлении:

<li *ngFor="let post of posts">
   <strong>{{post.post_ID}}</strong>
   <!-- ... -->
</li>

Answer 2

Если ваш json пуст, вы можете увидеть его на виде с помощью json.Вот так {{var |json}}