I have initialized a table with user details using the ngOnInit() method.
When I click on the "create user" button, it opens a form to add a new user to the database. However, the table does not update automatically with the new user's information. How can I achieve this?
Here is the code snippet:
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 line below doesn't reflect in the table this.usermgmt = userData;
Code for submitting the form 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 provide assistance. Thank you in advance.