Ionic 2 Angular 2 Отображение данных из массива объектов

Я пытаюсь создать «простое» приложение Ionic 2/Angular 2, которое предоставляет информацию избирателям из API-интерфейса Google CivicInfo. Пользователи отправляют свой адрес, а поставщик услуг Ionic2/Angular2 принимает параметры формы и создает строку запроса url. Ответ помещается в Наблюдаемый.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 наблюдаемого пользователь берутся на страницу Civic Info листинга, где данные отображаются для пользователя.

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'. И почему вы используете async везде для доступа к пользовательским данным, кроме как там? Я бы не использовал async вообще: сохраните фактический массив в вашем компоненте, включите все в * ngIf, чтобы убедиться, что контент отображается только тогда, когда массив доступен, и удалите операторы async и 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 Отображение данных из массива объектов

ответ

Смежные вопросы