如何获得响应（json数组）并将其放入Angular 4中的我的html组件中

Question

我正在尝试在 JSON 响应中获取数组数据。以下是我的 JSON 响应，我需要将所有数据获取到组件中的 html 标记。

   {
  data : {
  "topLikedMedia" : [

  {
    "id": "1546567845943506613_3718981156",
    "type": "image",
    "user": {
      "id": "3718981156",
      "username": "agoramonitor",
      "full_name": "AgoraMonitor",
      "profile_picture": "https://scontent.cdninstagram.com/t51.2885-19/s150x150/18809269_476795959342067_7353566623065702400_n.jpg"
    },
    "tags": [
      "instagramers",
      "content",
      "socialmedia",
      "marketing",
      "branding",
      "instagram"
    ],
    "location": null,
    "comments": {
      "count": 2
    },
    "formatted_comments_count": "2",
    "created_time": "1498585275",
    "formatted_time": "Tue, Jun 27, 2017 7:41 PM",
    "diff_humans_time": "4 months ago",
    "link": "https://www.instagram.com/p/BV2g0MGgPa1/",
    "likes": {
      "count": 154
    },
    "formatted_likes_count": "154",
    "images": {
      "thumbnail": {
        "width": 150,
        "height": 150,
        "url": "https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c244.0.591.591/19533988_862713503881059_8677706625265434624_n.jpg"
      },
      "low_resolution": {
        "width": 320,
        "height": 175,
        "url": "https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/19533988_862713503881059_8677706625265434624_n.jpg"
      },
      "standard_resolution": {
        "width": 640,
        "height": 350,
        "url": "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/19533988_862713503881059_8677706625265434624_n.jpg"
      }
    },
    "caption": "Whether you want to drive leads to your homepage or encourage customer engagement ",
    "userHasLiked": false,
    "filter": "Normal"
  }

],

}

我有这个输出的临时值，我需要接收这个响应并将它分发到它自己的标签上，我不知道如何

Answer 1

第一个解决方案，Angular 方式：

getTopLiked() { 
  this._dashboardService.getTopPosts()
    .subscribe(res => { 
      // Get your data in your component's variable
      this.data = res.json();
    });
}

在您的 HTML 中

<div *ngIf="data">
  <div *ngFor="let liked of data.topLikedMedia">
    <p>ID : {{liked.id}}</p>
    <!-- And you do every other field like that -->
  </div>
</div>

第二种解决方案，旧的 Javascript 方式

getTopLiked() { 
  this._dashboardService.getTopPosts()
    .subscribe(res => { 
      this.createMarkup(res.json());
    });
}

createMarkup(data: Object) {
  this.markup = '';
  for (let liked of data.topLikedMedia) {
    this.markup += `<p>ID : ${liked.id}</p>`;
    // add the other fields like that
  }
}

在您的 HTML 中

<div *ngIf="markup">
  <div [innerHTML]="markup"></div>
</div>