This is my UsersList component on clicking the table. A new page will be opened
Upon changing the user values and saving it, The saved value is not reflected in the grid for the first time. But when I do the same operation again it is getting reflected .
Below is my Save user code
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { UserService } from './../../shared/services/user.service';
import {User} from './../../shared/models/user';
@Component({
selector: 'app-user-add-edit',
templateUrl: './user-add-edit.component.html',
styleUrls: ['./user-add-edit.component.css']
})
export class UserAddEditComponent implements OnInit {
private user: User;
private id:Number;
constructor(private userService: UserService, private route: ActivatedRoute,private router: Router) { }
ngOnInit() {
this.id = Number(this.route.snapshot.params['id']);
if (this.id) {
this.userService.read(this.id).subscribe(
users => this.user = users,
err => {
console.log(err);
}
);
}
}
saveUser(){
this.userService.update(this.user.client,this.user.firstName,this.user.lastName,this.user.id,this.user.key).subscribe(
users => this.user = users,
err => {
console.log(err);
}
);
this.router.navigateByUrl("users");
}
}
What I did not understand was even though this.router.navigateByUrl("users"); is called after the save receives response from the observable, Why is not getting updated in the table for the first time?
User-Edit-Component
<div class="container">
<h1 class='text-info' >Edit Users</h1>
<div class="form-container">
<form (ngSubmit)="saveUser()">
<div class="form-group">
<hr>
<label for="name" class='text-info'><b> Client</b></label>
<input type="text" name="client" [(ngModel)]="user.client" class="form-control" required />
</div>
<div class="form-group">
<label for="name" class='text-info'><b>FirstName</b></label>
<input type="text" name="firstName" [(ngModel)]="user.firstName" class="form-control" required />
</div>
<div class="form-group">
<label for="name" class='text-info'><b>LastName</b></label>
<input type="text" name="lastName" [(ngModel)]="user.lastName" class="form-control" required />
</div>
<div class="form-group">
<a class="btn btn-default" routerLink="/users">Cancel</a>
<button class="btn btn-primary">Save</button>
<button class="btn xs btn-danger" (click)="deleteUser(user.id)">Delete</button>
</div>
</form>
</div>
</div>
User Service
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
import { Component, OnInit, Injectable } from '@angular/core';
import { Http, Request, RequestMethod, RequestOptions, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import {User} from './../../shared/models/user';
@Injectable()
export class UserService implements OnInit {
private appContent = 'application/json';
private _router: Router;
private baseUrl = 'http://localhost:5000/api/v1/';
//Constructor to initialize authService to authenticate user, http to send the CRUD request and Router for the resource
constructor(private authService: AuthService, private http: Http,private router: Router) {
}
ngOnInit() {
}
//For creating a user Client,Key,Firstname and lastName has to be passed
create(client: string, key: string, firstName: string, lastName: string) :Observable<boolean> {
//createAuthenticatedRequest is called before sending the Http request
let request = this.createAuthenticatedRequest(JSON.stringify({client: client, key: key, firstName: firstName, lastName: lastName}),RequestMethod.Post);
return this.http.request(request).map(r=>{
r.ok;
}).catch((error: any) =>{
return Observable.throw(error);
});
}
update(client: string, firstName: string, lastName: string,id: number, key: string) :Observable<any> {
var request = this.createAuthenticatedRequest(JSON.stringify({client: client, key: key, firstName: firstName,
lastName: lastName, id:id}),RequestMethod.Put, id.toString());
return this.http.request(request).map(r=>{
r.json;
console.log(r);
}).catch((error: any) =>{
console.log(error);
return Observable.throw(error);
});
}
delete(client: string, key: string, firstName: string, lastName: string,id: number):Observable<boolean> {
var request = this.createAuthenticatedRequest(JSON.stringify({client: client, key: key, firstname: firstName, lastName: lastName}),RequestMethod.Delete, id.toString());
return this.http.request(request).map(r=>{
r.ok;
}).catch((error: any) =>{
return Observable.throw(error);
});
}
//Read method takes an optional input id, If id is not passed to read it will get the entire list , else it will get the record with specified id
read(id?: Number):Observable<any> {
id = (id == undefined) ? 0 : id ;
if (id >0)
// Get single resouce from Collection
var request = this.createAuthenticatedRequest(null,RequestMethod.Get, id.toString());
else
// Get the entire collection
request = this.createAuthenticatedRequest(null,RequestMethod.Get, id.toString());
return this.http.request(request).map(r=>{
console.log(r.text());
return JSON.parse("[" + r.text() + "]")[0];
}).catch((error: any) =>{
return Observable.throw(error);
});
}
//This method accepts json of the attribtes client,key,firstname and lastName and request method(Post/Get/Put/delete) and
//an optional parameter id , This method's return type is Request
createAuthenticatedRequest(json : string, reqMethod: RequestMethod, optionalparam?: string) : Request{
//checks if the user is authenticated user with authentication service method isAuthenticated
if (this.authService.isAuthenticated()) {
console.log('authenticated');
optionalparam =(optionalparam==undefined || optionalparam =='0') ? "" : optionalparam;
const request = new Request({
method: reqMethod,
url: this.baseUrl + 'creds/' + optionalparam +"",
body: json
});
//request header Authorization is added to specify that the request has an authenticated token
request.headers.append('Authorization', 'Bearer ' + this.authService.getToken());
request.headers.append('Content-Type', this.appContent);
request.headers.append('Accept', this.appContent);
return request;
}
else {
console.log('notauthenticated');
this._router.navigateByUrl('/login');
}
}
}
Userlist COmponent
import { Component, OnInit,NgZone } from '@angular/core';
import { UserService } from './../../shared/services/user.service';
import { Router } from '@angular/router';
import { AuthService } from './../../shared/services/auth.service';
import { Http, Request, RequestMethod, RequestOptions, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import {User} from './../../shared/models/user';
@Component({
selector: 'app-userlist',
templateUrl: './userlist.component.html',
styleUrls: ['./userlist.component.css']
})
export class UserlistComponent implements OnInit {
private appContent = 'application/json';
private baseUrl = 'http://localhost:5000/api/v1/';
private users: User[];
constructor(authService: AuthService, private http: Http,private router: Router, private userService: UserService) {
}
ngOnInit() {
console.log("Test");
this.userService.read().subscribe(
users => this.users = users,
err => {
console.log(err);
}
);
}
editUser(id) {
this.router.navigateByUrl('/users/edit/'+id);
}
}
Userlist Template
<h1 class='text-info' >Users</h1>
<hr>
<div class="container">
<table class="table table-hover table-bordered thead-inverse">
<thead>
<tr class="bg-success">
<th>Client</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users" (click)="editUser(user.id)">
<td>{{user.client}}</td>
<td>{{user.firstName}}</td>
<td >{{user.lastName}}</td>
</tr>
</tbody>
</table>
</div>
I appreciate if someone can help me on this.
Try changing:
saveUser(){
this.userService.update(this.user.client,this.user.firstName,this.user.lastName,this.user.id,this.user.key).subscribe(
users => this.user = users,
err => {
console.log(err);
}
);
this.router.navigateByUrl("users");
}
To:
async saveUser(){
await this.userService.update(this.user.client,this.user.firstName,
this.user.lastName,this.user.id,this.user.key)
.toPromise()
.then( users => this.user = users)
.catch( err => console.log(err) );
this.router.navigateByUrl("users");
}
Or:
saveUser(){
this.userService.update(this.user.client,this.user.firstName,
this.user.lastName,this.user.id,this.user.key).subscribe(
users => {
this.user = users;
this.router.navigateByUrl("users");
},
err => {
console.log(err);
}
);
}
I was also facing the same problem. The thing which worked for me was that on successfully saving the details of the user, I called the function in the service which was fetching the whole user list. So, In this way, User list got updated to the latest.
So, In your saveUser function,After update function of userService, call the read function of your userService. It should update your userList.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With