Angular 2如何从服务器

时间:2016-06-30 14:48:21

标签: angular

目前我正在拨打一个单一服务,该服务会回赠一组对象"帖子":

HTML:

<div class="container">
<h1>Clients About Us</h1>
    <i *ngIf="postsLoading" class="fa fa-spinner fa-spin fa-3x" style="color:white"></i>

    <div class="col-md-6 fix-height" *ngFor="let post of posts">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object thumbnail" src="http://lorempixel.com/80/80/people?random={{ post.id }}" alt="people">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">{{ user.name }}@ ={{ post.title }}</h4>
                <p> {{ post.body }}</p>
            </div>
        </div>
    </div>
</div>

现在我正在尝试检索每个帖子的同时用户对象,所以我可以放在前面&#34; @&#34;每个帖子的作者的user.name。 用户和帖子对象的示例结构是:

USERS:

 {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
          "street": "Kulas Light",
          "suite": "Apt. 556",
          "city": "Gwenborough",
          "zipcode": "92998-3874",
          "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
          }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
          "name": "Romaguera-Crona",
          "catchPhrase": "Multi-layered client-server neural-net",
          "bs": "harness real-time e-markets"
        }
      }

文章:

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur o"
  }

当我获得帖子时,我应该使用女巫方法在同一次迭代中从服务器获取此user.name吗?

如果有人能解释我该怎么做并指出我应该学习哪些信息才能完成这项工作,或者分享一些示例代码,那将是很好的。

非常感谢。

修改 我在组件中有一个函数,它通过Id

检索用户对象
private loadUser(userId:any){
    return this._aboutusService.getUser(userId)
    .subscribe(
        user => this.user.name = user.name,
        response => {
            if (response.status == 404){
                this._router.navigate(['Home']);
            }
        }
    );
}

我现在应该如何才能获得html中的名字?

<div class="col-md-6 fix-height" *ngFor="let post of posts" >
    <div class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object thumbnail" src="http://lorempixel.com/80/80/people?random={{ post.id }}" alt="people">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ loadUser(post.userId)  }}@ {{ post.title }}</h4>
            <p> {{ post.body }}</p>
        </div>
    </div>
</div>

0 个答案:

没有答案