在 Nativescript ListView 中显示项目

Question

我正在使用 Angular 2 学习 Nativescript，并尝试从 https://randomuser.me API 获取随机用户数据。我无法在 ListView 中仅显示 10 个随机用户的名称。它只在 ListView 中显示 10 个空白列表项。

这是我的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');

}

}

这是我的 html 模板文件

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

非常感谢任何帮助。

Answer 1

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

Answer 2

您在 ListView 项 Template 中为 text 属性添加绑定的方式似乎有误。只需将 (text)="item.gender" 更改为 [text]="item.gender"。

请注意，对于 angular 2 中的“从数据源到视图目标的单向方式”，您应该使用 [] 语法，() 是一种“从视图目标到数据源的单向方式”，例如可用于事件处理程序。

Here 您可以找到有关 angular 绑定语法的更多详细信息。

在 Nativescript ListView 中显示项目

Display items in the Nativescript ListView

javascript

android

typescript

nativescript

angular