Correct way to populate listView with object items?

Question

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.

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

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>

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

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"
    }
}

I am using nativeScript 2.0.1

Answer 1

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>

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

And check the tutorial about NativeScript + Angular-2 ListView here