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

在我的NativeScript项目中，我试图用自定义对象（定义为接口）的实例来填充ListView。但是输出（在一个android模拟器上）很奇怪：我得到的“[object object ... object]”跨越多行生成，而不是按照我的定义获取每个实例名称内容。使用对象项填充listView的正确方法？

这是我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

来源

2016-05-30 loloof64

您使用NativeScript时+角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

并检查关于Nativ的教程eScript + Angular-2列表视图here

来源

2016-05-30 12:39:25

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

回答

相关问题