Angular 2 Table not Updated when Value changes

Question

I have a table with user details, that gets loaded with ngOnInit().

The "create user" button opens another form that lets me add a new user. The user gets added to the database, but the table is not updated with the new user. How do i achieve this?

Code is as follow:

import { Component, OnInit } from '@angular/core';
import { IUsermgmt } from './usermgmtinterface';
import { UsermgmtService } from './usermgmt.service';

@Component({
selector: 'um-user',
styleUrls: ['./usermgmt-list.component.css'],
templateUrl: './usermgmt-list.component.html'
})
export class UserListComponent implements OnInit{
    errorMessage: string;
    usermgmt: IUsermgmt[];

constructor(private _usermgmtService: UsermgmtService,private        userPosterService:FormPosterUser){
    }

updateTable(userData){
    this.usermgmt = userData;
    this._usermgmtService.getUserlist()
            .subscribe(
                usermgmt => {                      
                    this.usermgmt = usermgmt;
                    console.log("inside Update table function" +JSON.stringify(this.usermgmt));
                },
                 error => this.errorMessage = <any>error);
    }

 ngOnInit(): void {
       this._usermgmtService.getUserlist()
            .subscribe(
                usermgmt => this.usermgmt = usermgmt,
                 error => this.errorMessage = <any>error);
    }

}

The following line doesnt reflect in the table this.usermgmt = userData;

Code to submit is as follows:

    submitForm(form: NgForm) {
    // validate form

    this.formposteruser.postUserForm(this.model)
        .subscribe(
          data => {
            console.log('success: ', data);
            this.us.getUserlist()
                .subscribe(
                    usermgmt =>{
                          this.usermgmt = usermgmt;
                          this.userService.updateTable(this.usermgmt);         
                    },
                     error => this.errorMessage = <any>error);
          },
          err => console.log('error: ', err)
        );
  }

how do i reflect the new usermgmt data on the table?

Html code

<div class='panel panel-primary'>
<div class='panel-heading'> 
   <button class="btn btn-sucess">  <a [routerLink]="['/newuser']">Create New User</a> </button>
   <button class="btn btn-danger pull-right" (click)=onDeleteClick()>Delete User</button>
</div>

<div class='panel-body'>
    <div class='row'>
        <div class='col-md-4'>Search by UserName: </div>
        <div class='col-md-4'>
            <input type='text'
            [(ngModel)] = 'listFilter'/>
        </div>
    </div>
    <div class="nestedcomponent">
    <div class='table-responsive'>
        <table  class='table'
                    *ngIf='usermgmt && usermgmt.length'>
            <thead>
                <tr>
                    <th>{{usermgmt.length}}</th>
                    <th>User name</th>
                    <th>User Group</th>
                </tr>
            </thead>
            <tbody>
                    <tr *ngFor='let usermgmt of usermgmt | usermgmtFilter:listFilter'>
                        <td>
                             <input #{{usermgmt.emp_num}} [(ngModel)]="usermgmt.selected" type="checkbox" (change)="checkbox(usermgmt)">
                        </td>
                        <td [routerLink]="['/userEdit']" (click)="onTableSelect(usermgmt)">{{ usermgmt.user_name}}</td>
                        <td>{{ usermgmt.ug_desc|| 'Unassigned'}}</td>
                    </tr>
            </tbody>            
        </table>               
</div>

Please help. Thanks in advance.

is the data inserted in the database or you get error in the console? — Aravind, Jan 17 '17 at 10:27
@Aravind Data gets inserted successfully. When I reload the page, the table gets updated. But i want it to be updated with the submit. — Divya D Dev, Jan 17 '17 at 10:30
`let usermgmt of usermgmt` What does it mean? Why do you use the same variable name? — yurzui, Jan 17 '17 at 10:37
that doesnt have an impact. i tried changing them too. its like " let user of usermgmt" — Divya D Dev, Jan 17 '17 at 10:39
Have a look at http://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2 which should help you. — AnarchistGeek, Jan 17 '17 at 10:47

score -1 · Answer 1 · answered Jan 17 '17 at 10:46

Firstly, separate your service request into another function as below

getUserList(){
    this._usermgmtService.getUserlist()
            .subscribe(
                usermgmt => this.usermgmt = usermgmt,
                 error => this.errorMessage = <any>error);
    }
}

Next when your submit button is hit you must be subscribing to the web service data again as below

updateTable(userData){
    this.usermgmt = userData;
    this._usermgmtService.getUserlist()
            .subscribe(
                usermgmt => {                      
                    this.usermgmt = usermgmt;
                    console.log("inside Update table function" +JSON.stringify(this.usermgmt));
                },
                 error => this.errorMessage = <any>error);
    this.getUserList();
    }

Also in your ngOnInit() make sure that you use the declared function getUserList() as below

ngOnInit(): void {
       this.getUserList();
}

when it did this and printed usermgmt on the console.. i got undefined. — Divya D Dev, Jan 17 '17 at 10:53
when i reload the table has all the values. But when i manually change the usermgmt, the table is not getting updated. — Divya D Dev, Jan 17 '17 at 11:46

Angular 2 Table not Updated when Value changes

1 Answers1