Korrekter Weg, um ListView mit Objektelementen zu füllen?

Question

In meinem NativeScript-Projekt versuche ich, einen ListView mit Instanzen eines benutzerdefinierten Objekts (als Schnittstelle definiert) zu füllen. Aber die Ausgabe (auf einem Android-Emulator) ist ziemlich seltsam: Ich bekomme "[object object ... object]" über mehrere Zeilen erzeugt, anstatt jeden Instanznamen-Inhalt zu bekommen, wie ich es definiert habe.

Das ist mein component.ts ist:

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'}, 
     ] 
    } 
} 

Das ist mein component.html ist:

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

Das ist mein component.css:

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

Alle diese Dateien sind Teil einer einzelnen Komponente, definiert in einem eigenen Ordner

Das ist mein 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" 
    } 
} 

Ich verwende nativeScript 2.0.1

Answer 1

Sie die folgende Syntax benötigen, wenn NativeScript + Angular-2 Listenansicht mit:

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

Zum besseren Verständnis können Sie auf die Stichprobe-Groiceries Winkel Ende Zweig here

verweisen und überprüfen Sie das Tutorial über Nativ eScript + Angular-2 ListView here