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>

我的问题是我无法绑定图片和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}}，这是无效的。请帮忙

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)

将角度为2

2 个答案: