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

更改null的表格行tr标签，如下所示，然后再次检查：

*ngfor

在Angular 2中的DOM中没有更新数组

1 个答案: