Angular 2 - binding not working

I am trying to display some simple data in a template, but it doesn't work. The end result is displayed as:

{{message}}
ID  Name
{{item.id}} {{item.name}}

      

Here is the code. What am I doing wrong?

list.component.html

{{message}}
<table >
    <tr>
        <td>ID</td>
        <td>Name</td>
    </tr>
    <tr *ngFor="let item of items" >
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
    </tr>

</table>

      

list.component.ts

import {Component, OnInit, ViewChild, Renderer, EventEmitter, ElementRef} from '@angular/core';

@Component({
    templateUrl: 'app/list/list.component.html'
})

export class ListComponent implements OnInit {

    public message:string;

    items: [{id: number, name: string}];

    ngOnInit() {
        this.message = "hello";
        this.loadList();
    }

    loadList() {
        console.log("hello2");

        this.items = [{ id: 1, name: "Test1" }];
    }

}

      

+3


source to share





All Articles