在角度 2 中将 json 值绑定到 html 的问题

Question

我从 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"
}]

打字稿代码如下

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>

我的问题是我无法绑定 image 和 blog_data 值。 属性 imageurl 返回 /wp-content/baanner-loan.jpg ，我想将其附加到域中，但它没有显示任何内容，当我手动将其放入 eg.http://my.blog.net/wp-content/baanner-loan.jpg 时，它可以工作，所以问题出在格式上html。我还想显示 blog_data 的 post_title 属性，因为我已经写了 {{blogList.blog_data.post_title}} 这不起作用。 请帮忙

Answer 1

试试这个。

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

Answer 2

不要使用 {{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)