ListView Displays [object Object] instead of the actual item details


#1

Hi everyone,
I am new to nativescript and angular2. I am trying to render a nested component named “Article” within a parent component called “Articles List”. However, the list shows the below instead of the actual content of the article

Here is my article component
article.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {TNSFontIconService} from 'nativescript-ngx-fonticon';

@Component({
    moduleId: module.id,
    selector: 'article',
    templateUrl: 'article.component.html',
    styleUrls: ['article.component.css']
})
export class ArticleComponent implements OnInit {

    @Input() data: any;

    constructor(fonticon: TNSFontIconService) {
    }

    ngOnInit() {
    }
}

article.component.html

<StackLayout>
    <FlexboxLayout class="article-header" flexDirection="row">
        <Image class="author-avatar"
               [src]='data.authorAvatar'></Image>
        <Label class="author"
               [text]='data.author'></Label>
        <label class="created-at"
               [text]='data.createdAt'></label>
    </FlexboxLayout>

    <image stretch="aspectFit" class="article-image" src="~/images/article-thumbnail.jpeg"></image>

    <StackLayout class="article-body">
        <TextView class="article-title"
                  [text]='data.title'></TextView>
        <TextView class="article-summary"
                  [text]='data.summary'>

        </TextView>
    </StackLayout>

    <FlexboxLayout class="article-footer" flexDirection="row">
        <Label class="fa like-icon" [text]="'fa-heart' | fonticon"></Label>
        <Label [text]='data.likes' class="like-total"></Label>


        <Label class="fa share-icon" [text]="'fa-share-square' | fonticon"></Label>
        <Label [text]='data.shares' class="share-total"></Label>
    </FlexboxLayout>


</StackLayout>

Here is my Article List component
article-list.component.ts

import {Component, OnInit} from '@angular/core';

import {Article} from "./article";
import {ArticleService} from "./article.service";


@Component({
    moduleId: module.id,
    templateUrl: 'article-list.component.html',
    styleUrls: ['article-list.component.css']
})
export class ArticleListComponent implements OnInit {

    articles: Article[];

    constructor(private articleService: ArticleService) {

    }

    ngOnInit(): void {
        this.articles = this.articleService.getArticles();
    }
}

article-list.component.html

<ListView [items]="articles">
    <template let-article="item">
        <article [data]="article"></article>
    </template>
</ListView>

and here is my article module definition

import {NgModule} from '@angular/core';
import {TNSFontIconModule} from 'nativescript-ngx-fonticon';

import {ArticleComponent}   from './article.component';
import {ArticleListComponent} from './article-list.component';
import {ArticleService} from './article.service';

@NgModule({
    imports: [
        TNSFontIconModule.forRoot({
            'fa': '../assets/font-awesome.css',
            'ion': '../assets/ionicons.css',
        }),
    ],
    exports: [],
    declarations: [ArticleComponent, ArticleListComponent],
    providers: [ArticleService],
})
export class ArticleModule {
}

The article service

import {Injectable} from '@angular/core';

import {Article} from './article';

@Injectable()
export class ArticleService {

    private articles = new Array<Article>(
        {
            id: 1,
            authorAvatar: "~/images/avatar2.png",
            author: "Morison",
            createdAt: "an hour ago",
            articleImage: "~/images/article-thumbnail.jpeg",
            title: "Another popular scenario ",
            summary: "Another popular scenario is using a separate component for the ListView template. Using a custom control within a ListView actually is very simple",
            likes: 11,
            shares: 12,

        },
        {
            id: 2,
            authorAvatar: "~/images/avatar2.png",
            author: "Morison",
            createdAt: "an hour ago",
            articleImage: "~/images/article-thumbnail.jpeg",
            title: "Another popular scenario ",
            summary: "Another popular scenario is using a separate component for the ListView template. Using a custom control within a ListView actually is very simple",
            likes: 11,
            shares: 12,

        },
    );

    getArticles(): Article[] {
        return this.articles;
    }

    getArticle(id: number): Article {
        return this.articles.filter(article => article.id === id)[0];
    }
}

What is it that I am doing wrong? I could not figure it out myself

Regards