作成したサービスには次のメソッドがあります。
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フィードは次のようになります（はい、配列内の1つのオブジェクト）：
[
{
"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}}すると画面に[オブジェクトオブジェクト]が表示されます。
印刷する{{post | json}}と、行JSONフィードが表示されます。
そして最後に、私が印刷し{{post.title}}たり{{post?.title}}、何も得られなかったりした場合。
次のようなクラスの投稿もあります。
export class Post{
constructor(
public nid?: string,
public title?: string,
public body?: string
public image?: string
){
}
}
ヒントはありますか？
単一のオブジェクトであるはずの配列に配列を割り当てています。配列の最初の要素をpost変数にコピーします
this.post = res[0] as Post
補足：生のオブジェクトをクラスインスタンスに割り当てるのは正しくありません。この場合、あなたthis.post.constructorは存在しませんしthis.post instanceof Post == false。
可能ですObject.assign(this.post, res[0])が、すべてのプロパティが常に存在するわけではない場合は、既存のプロパティをクリアする必要があります。
代わりにオブジェクトの形状をインターフェイスとして定義することを好みます。実行時にすべてのインターフェイス情報が削除されるため、問題は発生しませんが、クラスはコンパイル時に静的な型チェックを行うだけでなく、コードを出力します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加