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
angular data-binding


source to share


No one has answered this question yet

Check out similar questions:

1690
How does data binding work in AngularJS?
1133
Can't bind to 'ngModel' as it is not a known property of 'input'
728
Angular HTML binding
563
Huge amount of files generated for each Angular project
520
How do I use WPF bindings with RelativeSource?
452
What's the equivalent of ngShow and ngHide in Angular 2+?
399
How do I bind RadioButtons to an enum?
349
Binding select element to object in Angular
2
Updating the list of users when a user is created in Angular 2
2
Using materialize-css (v 1.0.0) in Angular 5 does not work



All Articles
Loading...
X
Show
Funny
Dev
Pics