Question

在我的NativeScript项目中，我试图用自定义对象（定义为接口）的实例填充ListView。但输出（在Android模拟器上）非常奇怪：我得到了＃34; [对象对象]对象＆＃34;产生于多行，而不是像我定义的那样获取每个实例名称内容。

这是我的component.ts：

import {Component} from "@angular/core";

interface FileItem {
    isDirectory:boolean;
    name:String;
}

@Component({
    moduleId: module.id,
    selector: 'file-explorer',
    templateUrl: 'component.html',
    styleUrls: ['component.css']
})
export class FileExplorerComponent {
    public fileItems:Array<FileItem>;

    constructor(){
        this.fileItems = [
            {isDirectory: false, name:'ex03.fen'},
            {isDirectory: true, name:'test06'},
            {isDirectory: true, name:'test01'},
            {isDirectory: false, name:'ex02.fen'},
            {isDirectory: true, name:'test05'},
            {isDirectory: true, name:'test02'},
            {isDirectory: false, name:'ex01.fen'},
            {isDirectory: false, name:'ex05.fen'},
            {isDirectory: false, name:'ex03.fen'},
            {isDirectory: true, name:'test04'},
            {isDirectory: true, name:'test03'},
            {isDirectory: false, name:'ex04.fen'},
        ]
    }
}

这是我的component.html：

<ListView items={{fileItems}}>
    <ListView.itemTemplate>
        <Label width="5%" height="5%" text="Type"></Label>
        <Label text="{{name}}"></Label>
    </ListView.itemTemplate>
</ListView>

这是我的component.css：

Label {
    color: navy;
    font-size: 20em;
}

所有这些文件都是单个组件的一部分，在其自己的文件夹中定义

这是我的package.json：

{
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN LICENSE.md",
    "readme": "Chess Positions Archiver",
    "repository": "<fill-your-repository-here>",
    "nativescript": {
        "id":   "com.loloof64.nativescript.chess_positions_archiver.ChessPositionsArchiver ",
        "tns-android": {
            "version": "2.0.0"
        }
    },
    "dependencies": {
        "@angular/common": "2.0.0-rc.1",
        "@angular/compiler": "2.0.0-rc.1",
        "@angular/core": "2.0.0-rc.1",
        "@angular/http": "2.0.0-rc.1",
        "@angular/platform-browser": "2.0.0-rc.1",
        "@angular/platform-browser-dynamic": "2.0.0-rc.1",
        "@angular/platform-server": "2.0.0-rc.1",
        "@angular/router": "2.0.0-rc.1",
        "@angular/router-deprecated": "2.0.0-rc.1",
        "@angular/upgrade": "2.0.0-rc.1",
        "nativescript-angular": "0.1.6",
        "nativescript-intl": "^0.0.2",
        "parse5": "1.4.2",
        "punycode": "1.3.2",
        "querystring": "0.2.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "tns-core-modules": "^2.0.0",
        "url": "0.10.3",
        "zone.js": "^0.6.12"
    },
    "devDependencies": {
        "babel-traverse": "6.9.0",
        "babel-types": "6.9.1",
        "babylon": "6.8.0",
        "filewalker": "0.1.2",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "^0.3.2",
        "typescript": "^1.8.10"
    }
}

我使用的是nativeScript 2.0.1

Answer 1

使用NativeScript + Angular-2列表视图时需要以下语法：

<ListView [items]="fileItems">
    <template let-item="item">
        <StackLayout>
            <Label width="5%" height="5%" text="Type"></Label>
            <Label [text]="item.name"></Label>
        </StackLayout>
    </template>
</ListView>

为了更好地理解，您可以使用样本Groiceries角端分支here

并查看有关NativeScript + Angular-2 ListView here

的教程

使用对象项填充listView的正确方法？

1 个答案: