このオブジェクトのプロパティを呼び出すことができないのはなぜですか？ （Angular、MongoDB）

Question

私は、MongoDBデータベースとNodeJSサーバーを使用する角型アプリケーションを作っています。

アイデアは、私は現在、投稿のリストとその詳細な投稿のリストだけを持つアプリケーションを作成することです。コンポーネントはお互いにうまく立って動作していますが、私には1つの問題があります。私が1つのポストを取得しようとすると、console.dir（post）を介してすべてが良好であり、オブジェクトが角型アプリケーションに送信されていることがわかります。問題は、私がpost.contentを使用しようとすると、私は未定義のメッセージを得ることです。

私は何時間も検索しましたが、原因を見つけることができませんでした。私はあなたが私に与えることができるどんな助けにも非常に感謝します。ここの下にすべての情報があります。あなたが何か他のものを見る必要があるなら、私に教えてください。

ありがとうございます。

これは、データを表示するpost-detail.component.htmlです。

detail.tsをファイル

<div class="row"> 
<div class="col-xs-12"> 
<p>Content:</p> 
<h1>{{ post.content }}</h1> 
</div> 
</div> 

（私が輸入を残し）私は、実際のデータを取得するために使用しています

@Component({ 
    selector: 'app-post-detail', 
    templateUrl: './post-detail.component.html', 
    styleUrls: ['./post-detail.component.css'] 
}) 
export class PostDetailComponent implements OnInit { 
    post: Post = new Post(); 
    id: string; 

constructor(private postService: PostService, 
      private route: ActivatedRoute, 
      private router: Router) { 
} 

ngOnInit() { 
    this.route.params 
    .subscribe(
     (params: Params) => { 
     this.id = params['id']; 
     this.postService.getPost(this.id).then(res => { 
      console.dir(res); 
      console.dir(res.content); 
      this.post = res; 
     }); 
     } 
    ); 
    } 
} 

post.service.ts：

@Injectable() 
export class PostService { 
    postChanged = new Subject<Post[]>(); 

    private headers = new Headers({'Content-Type': 'application/json'}); 
    private serverUrl = environment.serverUrl + '/blogPosts/'; // URL to web api 
    private posts: Post[]; 

    constructor(private http: Http) { 
    } 

    //this one DOES work 
    getPosts() { 
    console.log('Fetching BlogPosts from database.') 
    return this.http.get(this.serverUrl, {headers: this.headers}) 
     .toPromise() 
     .then(response => { 
     this.posts = response.json() as Post[]; 
     return response.json() as Post[]; 
     }) 
     .catch(error => { 
     return error; 
     }); 
    } 

    getPost(index: string) { 
    console.log('Fetching individual BlogPost from database.'); 
    console.log('index' + index); 
    if (index == null) { 
     console.log('null'); 
     return null; 
    } 
    return this.http.get(this.serverUrl + index, {headers: this.headers}) 
     .toPromise() 
     .then(response => { 
     console.dir(response.json().content); 
     console.dir(response.json()); 
     return response.json() as Post; 
     }) 
     .catch(error => { 

     return this.handleError(error); 
     }); 
    } 
} 

投稿モデル：

export class Post { 

    private id: string; 
    private _content: string; 

    constructor(values: Object = {}) { 
    Object.assign(this, values); 
    } 
    public get _id(): string { 
    return this.id; 
    } 

    public set _id(n: string) { 
    this.id = n; 
    } 

    public get content(): string { 
    return this._content; 
    } 

    public set content(n: string) { 
    this._content = n; 
    } 
} 

私はPostman GET/blogPost/idとコンソールログを画像として追加しました。 ありがとう！

Console log

Postman GET route

Answer 1

私が間違っているかもしれないが、あなたは、サービス内のどこにでもcontentに_contentを変更してくださいできますか？

編集：サービス方法を呼び出すときにthis.idが正しいことを確認してください。 null or undefinedの場合はreturn nullが実行されます。

もう1つ注意しておきますが、この例では応答はオブジェクトの配列（1つのオブジェクト）です。コンポーネント内でthis.post = res[0];を試すことはできますか？ post.service.tsで

Answer 2

return response.json() as Post; 

は次のようになります。私はそれを取得し、それを使用することができたことにアクセスすることにより、オブジェクトが配列に包まれていたことがわかりませんでした

return response.json()[0] as Post; 

。