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

我正在尝试创建一个'简单'Ionic 2/Angular 2应用程序，它可以通过Google CivicInfo API调用向选民提供信息。用户提交他们的地址，Ionic2/Angular2服务提供者采用表单参数并创建一个url查询字符串。响应被放入Observable中。Ionic 2 Angular 2显示来自对象阵列的数据

CivicInfoProvider.ts

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

随着响应作为JSON可观察的用户被带到其中数据被显示用于用户的文娱信息列表页面。

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>

我的问题 ::我不能找出如何显示从存储在数组pollingLocations的对象下面的JSON例子。我可以显示normalizedInput ...

以真实的角度来看，没有任何错误消息或神秘消息不会对文档或Google搜索带来任何帮助。

Selectioned 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

来源

2016-10-23 Scudder Stevens

这是'* ngFor'，不'ngFor'。为什么在任何地方使用异步访问用户数据，除了那里？我根本不会使用异步：将实际数组存储在组件中，将所有内容都包含在* ngIf中，以确保只有当数组可用时才显示内容，并移除异步和elvis操作符。 –

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

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

DEMO

来源

2016-10-23 16:45:10 Sajeetharan

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

回答

相关问题