DOMで角度2の配列が更新されない

Question

DOMの配列タイプの配列を更新しようとしています。しかし、私は関数でその配列を呼び出すときにすべての値を取得していますが、その配列の値はDOMで更新されていません。

import {Component} from 'angular2/core'; 


@Component({ 
    selector:'contacts', 
    templateUrl:'./dev/RouteComponents/contacts.component.html' 

}) 

export class ContactsComponent{ 

checking=false; 

    contacts=[ 
    {firstname:'vishu',lastname:'handa',contactno:'12654',gender:'male'}, 
    {firstname:'lalit',lastname:'gupta',contactno:'56489',gender:'male'}, 
    {firstname:'aman',lastname:'singh',contactno:'48984',gender:'male'}, 
    {firstname:'gaurav',lastname:'gupta',contactno:'5485',gender:'male'} 
    ]; 


    addContactToContactList(firstname,lastname,contact,gender) 
    { 
    console.log(firstname.value+"--"+lastname.value+"--"+contact.value+"--"+gender.value); 

    this.contacts.push({firstname:firstname.value,lastname:lastname.value,contactno:contact.value,gender:gender.value}); 

    this.run(); 

    } 

    run() 
    { 
    console.log(this.contacts.length); 
    this.checking = true; 
    } 

} 






<p *ngIf="checking">checking</p> 


<table class="table table-bordered table-hover table-condensed"> 
    <thead> 
    <tr> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Contact Name</th> 
    <th>Gender</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="#contact of contacts"> 
    <td>{{contact.firstname}}</td> 
    <td>{{contact.lastname}}</td> 
    <td>{{contact.contactno}}</td> 
    <td>{{contact.gender}}</td> 
    </tr> 
    </tbody> 
</table> 

値はDOM

Answer 1

で更新取得されていないが、以下のよう *ngforのためのあなたのテーブル行 trタグを変更して、もう一度それをチェック

：

<tr *ngFor="let contact of contacts"> 
    <td>{{contact.firstname}}</td> 
    <td>{{contact.lastname}}</td> 
    <td>{{contact.contactno}}</td> 
    <td>{{contact.gender}}</td> 
</tr>