问题在角色2中绑定json值到html
问题描述:
我从API获取json对象,我想将该JSON对象值绑定到我的html。 以下是JSON对象问题在角色2中绑定json值到html
[
{
"cat_name": "FAMILY TIME",
"id": 9,
"blog_data": [
{
"ID": 46,
"post_author": "1",
"post_date": "2017-07-17 10:43:55",
"post_date_gmt": "2017-07-17 10:43:55",
"post_content": "this is second one",
"post_title": "second one",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "open",
"ping_status": "open",
"post_password": "",
"post_name": "second-one",
"to_ping": "",
"pinged": "",
"post_modified": "2017-07-17 10:57:06",
"post_modified_gmt": "2017-07-17 10:57:06",
"post_content_filtered": "",
"post_parent": 0,
"guid": "",
"menu_order": 0,
"post_type": "post",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
}
],
"imageurl": "/wp-content/baanner-loan.jpg"
},
{
"cat_name": "FOODIE",
"id": 7,
"blog_data": [
{
"ID": 48,
"post_author": "1",
"post_date": "2017-07-17 10:45:44",
"post_date_gmt": "2017-07-17 10:45:44",
"post_content": "this is foodie in",
"post_title": "check one foodie",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "open",
"ping_status": "open",
"post_password": "",
"post_name": "check-one-foodie",
"to_ping": "",
"pinged": "",
"post_modified": "2017-07-17 10:45:44",
"post_modified_gmt": "2017-07-17 10:45:44",
"post_content_filtered": "",
"post_parent": 0,
"guid": "",
"menu_order": 0,
"post_type": "post",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
}
],
"imageurl": "/wp-content/country-guide1.jpg"
}]
打字稿代码如下
CategoryBlogHomePage() {
var self = this;
var timez = '';
self.blogapi.CategoryBlogHomePage().subscribe(
x => {
this.BlogListByCat = x;
console.log(this.BlogListByCat);
});
}
而且我的HTML如下
<a *ngFor="let blogList of BlogListByCat ; let i = index" class="featured-story cover-bg post{{i}}" href="#" style="background-image: url('http://my.blog.net{{blogList.imageurl}}');">
<div class="post-details">
<span class="post-category hardscience-cat">{{blogList.cat_name}} </span>
<h3 class="featured-story-title">{{blogList.blog_data.post_title}} </h3>
</div>
</a>
我的问题是我不能够结合图像和blog_data值。 属性imageurl返回/wp-content/baanner-loan.jpg我想附加域,但它没有显示任何东西,当我把它手动例如。 http://my.blog.net/wp-content/baanner-loan.jpg它的工作原理是这样的问题是格式在HTML中的东西。此外,我想显示blog_data的post_title属性,因为我写了{{blogList.blog_data.post_title}}这不起作用。 plz help
答
试试用这个。
<div class="post-details">
<span class="post-category hardscience-cat">{{blogList.cat_name}} </span>
<h3 class="featured-story-title">{{blogList.blog_data[0].post_title}} </h3>
</div>
答
,而不是{{blogList.blog_data.post_title}}和{{blogList.imageurl}},使用以下行是有执行console.log
var blogList = [
{
"cat_name": "FAMILY TIME",
"id": 9,
"blog_data": [
{
"ID": 46,
"post_author": "1",
"post_date": "2017-07-17 10:43:55",
"post_date_gmt": "2017-07-17 10:43:55",
"post_content": "this is second one",
"post_title": "second one",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "open",
"ping_status": "open",
"post_password": "",
"post_name": "second-one",
"to_ping": "",
"pinged": "",
"post_modified": "2017-07-17 10:57:06",
"post_modified_gmt": "2017-07-17 10:57:06",
"post_content_filtered": "",
"post_parent": 0,
"guid": "",
"menu_order": 0,
"post_type": "post",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
}
],
"imageurl": "/wp-content/baanner-loan.jpg"
},
{
"cat_name": "FOODIE",
"id": 7,
"blog_data": [
{
"ID": 48,
"post_author": "1",
"post_date": "2017-07-17 10:45:44",
"post_date_gmt": "2017-07-17 10:45:44",
"post_content": "this is foodie in",
"post_title": "check one foodie",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "open",
"ping_status": "open",
"post_password": "",
"post_name": "check-one-foodie",
"to_ping": "",
"pinged": "",
"post_modified": "2017-07-17 10:45:44",
"post_modified_gmt": "2017-07-17 10:45:44",
"post_content_filtered": "",
"post_parent": 0,
"guid": "",
"menu_order": 0,
"post_type": "post",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
}
],
"imageurl": "/wp-content/country-guide1.jpg"
}]
console.log(blogList[0].imageurl)
console.log(blogList[1].imageurl)
console.log(blogList[0].blog_data[0].post_title)
console.log(blogList[1].blog_data[0].post_title)
+0
图像显示错误错误TypeError:无法读取未定义的属性'imageurl'当我使用blogList [0] .imageurl –
哦感谢奏效英寸现在唯一的问题是形象。任何想法的建议?如果您使用[0]获取数据,则为 –
。那么为什么你需要嵌套ngFor? –
@ C.jacking检查你的图片网址。并绑定它在nghrf img标签 –