使用對象項填充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的正確方法？

回答

相關問題