问题在角色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

来源

2017-07-18 C.jacking

试试用这个。

<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>

来源

2017-07-18 11:48:33

哦感谢奏效英寸现在唯一的问题是形象。任何想法的建议？如果您使用[0]获取数据，则为 –

。那么为什么你需要嵌套ngFor？ –

@ C.jacking检查你的图片网址。并绑定它在nghrf img标签 –

，而不是{{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)

来源

2017-07-18 11:56:23

图像显示错误错误TypeError：无法读取未定义的属性'imageurl'当我使用blogList [0] .imageurl –

问题在角色2中绑定json值到html

回答

相关问题