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.
