用对象项填充listView的正确方法? [英] Correct way to populate listView with object items?

问题描述

在我的NativeScript项目中，我试图用自定义对象(定义为接口)的实例填充ListView.但是(在android模拟器上)的输出却很奇怪:我得到的是[[object object ... object]"跨多行生成，而不是像我定义的那样获取每个实例名称的内容.

In my NativeScript project, I am trying to fill a ListView with instances of a custom object (defined as an interface). But the output (on a android emulator) is quite strange : I am getting "[object object ... object]" spawned across multiple lines, instead of getting each instance name content, as I defined.

这是我的component.ts:

This is my 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:

This is my component.html:

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

这是我的component.css:

This is my component.css:

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

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

All these files are part of a single component, defined in its own folder

这是我的package.json:

This is my 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

I am using nativeScript 2.0.1

推荐答案

在使用NativeScript + Angular-2列表视图时，您需要以下语法:

You need the following syntax when using NativeScript + Angular-2 list-view:

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

为了更好地理解，您可以参考sample-Groiceries角端分支此处

For better understanding you can reffer to the sample-Groiceries angular-end branch here

并在此处查看有关NativeScript + Angular-2 ListView的教程

这篇关于用对象项填充listView的正确方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！