在angular 2中将json值绑定到html时出现问题

我从API获取json对象，我想将json对象值绑定到我的html。 下面是json对象

[
{
    "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"
}]

Typescript代码如下

CategoryBlogHomePage() {
    var self = this;
    var timez = '';

    self.blogapi.CategoryBlogHomePage().subscribe(
        x => {
            this.BlogListByCat = x;

            console.log(this.BlogListByCat);
        });
}

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

我的html如下

CategoryBlogHomePage() {
    var self = this;
    var timez = '';

    self.blogapi.CategoryBlogHomePage().subscribe(
        x => {
            this.BlogListByCat = x;

            console.log(this.BlogListByCat);
        });
}

 <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_数据值。 属性imageurl返回/wp content/baanner-loan.jpg，我想将其附加到域中，但它没有显示任何内容，当我手动将其放入时，例如，它可以工作，因此问题在于html格式。另外，我还想显示blog_数据的post_title属性，我为此编写了{{{blogList.blog_data.post_title}，但它不起作用。 plz帮助

尝试使用此功能

 <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.cat_name}
{{blogList.blog_数据[0]。post_title}

使用console.log中的以下行代替{{blogList.blog_data.post_title}和{{blogList.imageurl}}

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]获取数据。那么为什么需要嵌套的ngFor？@C.jacking检查您的图像url。并将其绑定在img上的nghrf中tag@RameshRajendran当我为例如手动放置它时，它起作用了。这对我起作用了[ngStyle]=“{'background-image'：'url（'+blogList.imageurl+'）”}”谢谢大家。对于显示错误的图像，错误类型错误：当我使用blogList[0]时无法读取未定义的属性'imageurl'