Ionic 2 Angular 2 显示来自对象数组的数据

Question

我正在尝试创建一个“简单”的 Ionic 2 / Angular 2 应用程序，该应用程序通过 Google CivicInfo API 调用向选民提供信息。用户提交他们的地址，Ionic2/Angular2 服务提供者采用表单参数并创建一个 url 查询字符串。响应被放入 Observable。

CivicInfoProvider.ts

return this.http.get(this.BASE_URL, { search: params })
.toPromise()
.then(response => response.json() as UserData[], err => console.log(err));

响应为 JSON Observable，用户被带到 Civic Info Listing 页面，在该页面中为用户显示数据。

CivicInfoList.ts

constructor(
public navCtrl: NavController,
    public navParams: NavParams,
    private info: CivicInfoProvider ) {
      this.addr.street = this.navParams.get('street');
      this.addr.city = this.navParams.get('city');
      this.addr.state = 'PA';
      this.addr.zip = this.navParams.get('zip');
      this.searchString = this.addr.street + ' ' +
                          this.addr.city + ' ' +
                          this.addr.state + ' ' +
                          this.addr.zip;
      this.userdata = this.info.getCivicInfo(this.searchString);
    } 

CivicInfoList.html

<ion-content padding>

  <h6>Search Results For:</h6>
  {{ (userdata | async)?.normalizedInput?.line1 }}
  {{ (userdata | async)?.normalizedInput?.city }}
  {{ (userdata | async)?.normalizedInput?.state }}
  {{ (userdata | async)?.normalizedInput?.zip }}

  <h6>Election Details:</h6>
  <ion-list lines>
    <ion-item>
      Name: {{ (userdata | async)?.election?.name }}
    </ion-item>
    <ion-item>
      Date: {{ (userdata | async)?.election?.electionDay }}
    </ion-item>
  </ion-list>

  <h6>Your Polling Location:</h6>
  <ion-item ngFor="location of userdata.pollingLocations">
    {{ location }}
  </ion-item>

  <h6>Contests:</h6>
  <ion-list lines>
    <ion-item ngFor="contest of userdata.contests, [value]='object'">
        {{ contest }}
    </ion-item>
  </ion-list>

</ion-content>

我的问题 :: 我无法从下面的 JSON 示例中弄清楚如何显示存储在数组 pollingLocations 中的对象。我可以显示 normalizedInput ...

在真正的 Angular 方式中，没有错误消息或神秘消息不会对文档或 Google 搜索产生任何帮助。

选定的 API 响应

{
 "kind": "civicinfo#voterInfoResponse",
 "election": {
  "id": "2000",
  "name": "VIP Test Election",
  "electionDay": "2017-06-06",
  "ocdDivisionId": "ocd-division/country:us"
 },
 "normalizedInput": {
  "line1": "911 Merrybell Lane",
  "city": "Kennett Square",
  "state": "PA",
  "zip": "19348"
 },
 "pollingLocations": [
  {
   "address": {
    "locationName": "KENNETT TOWNSHIP BLDG",
    "line1": "801 BURROWS RUN RD",
    "city": "CHADDS FORD",
    "state": "PA",
    "zip": ""
   },
   "notes": "",
   "pollingHours": "",
   "sources": [
    {
     "name": "Voting Information Project",
     "official": true
    }
   ]
  }
 ],

感谢您的帮助！ Screen Snap

Answer 1

你的 json 没有对象数组，你应该这样使用，

<ul>
      <li *ng-for="#person of people.pollingLocations">
          {{person.address | json}}}
    </li>
</ul>

DEMO