显示Nativescript ListView中的项目

Question

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 1

将<Label (text)="item.gender" textWrap="true"></Label>更改为<Label [text]="item.gender" textWrap="true"></Label>

Answer 2

It looks like you have made a mistake in the way you have added the binding for the text property in the ListView item Template . Simply change the (text)="item.gender" to [text]="item.gender" .

Note that for " One-way from data source to view target " in angular 2 you should use the [] syntax, the () is an " One-way from view target to data source " and for example could be used for event handlers.

Here you can find more details about angular binding syntax.