Правильный способ заполнить listView объектами?

Question

В моем проекте NativeScript я пытаюсь заполнить ListView экземплярами пользовательского объекта (определенного как интерфейс). Но вывод (на эмуляторе Android) довольно странный: я получаю "[object object ... object]", порождаемый несколькими строками, вместо того, чтобы получать содержимое имени каждого экземпляра, как я определил.

Это мой 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 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 здесь

И ознакомьтесь с руководством по NativeScript + Angular-2 ListView здесь