Угловое 2 Массив печатается на консоли, но не может печатать свойство объекта на экране

Question

У меня есть следующий метод в службе я создал:

getPost(nid: string): Observable<Post[]>{ 
    let url = "http://test.co.uk/api/v1/basic/" + nid; 
    return this.http.get(url, {headers: this.headers}).map(res => res.json() as Post).catch(err => { 

     return Observable.throw(err); 
    }); 
    } 

И это класс моего компонента:

export class PostDetailComponent implements OnInit { 
    posts: Post[] = []; 
    post: Post = new Post(); 
    constructor(
private route: ActivatedRoute, 
private postService: PostService 
) { } 
    ngOnInit() { 

    this.route.params.switchMap((params: Params) => { 
     let nid = params ['nid']; 
     return this.postService.getPost(nid); }).subscribe(res => { 
     console.log(res) 
     this.post = res as Post; 
    }, err =>{ 
     console.log(err); 
    }); 

    } 

} 

Подачу JSON выглядит так (да один объект в массиве):

[ 
    { 
     "nid":"3", 
     "title":"When Unity meets Vuforia", 
     "body":"<p>Unless you have been living under a rock in the past 7 - ...", 
     "uid":"admin", 
     "path":"\/node\/3", 
     "field_article_image":"http:\/\/test.co.uk\/sites\/default\/files\/when-unity-meets-vuforia_0.jpg?itok=BGYaotay" 
    } 
] 

Так что в моем шаблоне, если я печатаю {{post}} Я получаю [объект Object] на экране.

Если я печатаю {{post | json}} Я получаю строку JSON.

И, наконец, если я печатаю {{post.title}} или {{post?.title}} Я ничего не получаю.

У меня также есть класс Post, который смотрит как это:

export class Post{ 
    constructor(

public nid?: string, 
public title?: string, 
public body?: string 
public image?: string 
){ 
    } 
} 

Любые намеки?

Answer 1

Вы назначаете массив в то, что должно быть одним объектом. Скопируйте первый элемент массива в пост переменной

this.post = res[0] as Post 

Side Примечание: Это неправильно назначить необработанный объект экземпляра класса. В этом случае ваш this.post.constructor не будет существовать и this.post instanceof Post == false.

Вы можете сделать Object.assign(this.post, res[0]), но вам может потребоваться очистить существующие свойства, если не все свойства всегда присутствуют.

Я предпочитаю, чтобы определить объект формы, как интерфейсы вместо этого, то вы бы не иметь эту проблему, потому что вся информация, интерфейс удаляется во время выполнения, в то время как класс испускает некоторый код, а не просто делать проверки статических типов во время компиляции