Question

我正试图创造一个简单的＆＃39; Ionic 2 / Angular 2应用程序，通过Google CivicInfo API调用向选民提供信息。用户提交他们的地址，Ionic2 / Angular2服务提供者采用params形式并创建一个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

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

1 个答案: