Samarth Agarwal Samarth Agarwal - 4 months ago 91
Javascript Question

Display items in the Nativescript ListView

I am learning Nativescript with Angular 2 and trying to get Random user data from

https://randomuser.me
API. I am not able to display just the names of 10 random users in the ListView. It only displays 10 blank List Items in the ListView.

Here is my app.component.ts

import {Component} from "@angular/core";
import {Http, HTTP_PROVIDERS, Response} from "@angular/http";
import {Observable} from "rxjs/Rx";

@Component({
selector: "my-app",
templateUrl: "app.component.html",
providers: [HTTP_PROVIDERS]
})
export class AppComponent {
public names: Observable<Array<Object>>;

constructor(public http: Http){

}

public onTap(){
this.getData()
.subscribe(
(res) => {
this.names = res.json().results;
}
);
}

public getData(){
return this.http.get('https://randomuser.me/api/?results=10');

}


}

And here is my html template file

<StackLayout>
<Button text="GET" (tap)="onTap()"></Button>
<ListView [items]="names">
<template let-item="item">
<Label (text)="item.gender" textWrap="true"></Label>
</template>
</ListView>
</StackLayout>


Any help is highly appreciated.

Answer

change <Label (text)="item.gender" textWrap="true"></Label> to <Label [text]="item.gender" textWrap="true"></Label>

Comments