Tabelle wird in Angular 2 nicht aktualisiert

Question

Dies ist meine UsersList-Komponente beim Klicken auf die Tabelle. Eine neue Seite wird

Nach Änderung der Benutzerwert und speichert es, Der gespeicherte Wert reflektiert wird nicht zum ersten Mal im Netz geöffnet werden. Aber wenn ich dieselbe Operation wieder mache, wird es reflektiert.

Unten ist mein speichern Benutzercode

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"); 
} 

} 

Was ich nicht verstand war, obwohl this.router.navigateByUrl ("Benutzer"); wird aufgerufen, nachdem die Sicherung Antwort von der beobachtbaren erhält, warum wird nicht in der Tabelle zum ersten Mal aktualisiert?

Benutzer-Edit-Komponente

<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'); 
     }  



    } 

} 

Benutzerliste 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); 
    } 


} 

Benutzerliste Vorlage

<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> 

Ich schätze es, wenn mir jemand dabei helfen kann.

Answer 1

Versuchen Wechsel:

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"); 
} 

An:

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"); 
} 

Oder:

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); 
     } 
    );    
} 

Answer 2

ich auch das gleiche Problem konfrontiert wurde. Die Sache, die für mich funktionierte, war, dass beim erfolgreichen Speichern der Details des Benutzers, ich die Funktion in dem Dienst aufgerufen habe, der die gesamte Benutzerliste abgerufen hat. Also, auf diese Weise wurde die Benutzerliste auf den neuesten Stand gebracht.

Also, in Ihrer Funktion saveUser, nach Update-Funktion von userService, rufen Sie die Lesefunktion Ihres userService. Es sollte Ihre Benutzerliste aktualisieren.

Answer 3

Vielleicht nutzt Angular Ihre Komponente wieder, da die Route gleich bleibt und damit ngOnInit nicht mehr ausgelöst wird? Versuchen Sie, Ihre Benutzer Ladelogik in der userlist.component in einem ngOnChanges oder ngAfterViewInit Haken statt ngOnInit platzieren, wie folgt aus:

ngAfterViewInit() { 

    console.log("Test"); 
    this.userService.read().subscribe(
     users => this.users = users, 

     err => { 
     console.log(err); 
     } 
    ); 
    } 

Ein weiterer Ansatz, die Sie könnten versuchen, ist zu einer Routenänderung Ereignis in Ihrem ngOnInit Haken zu unterzeichnen, und dann Aktualisieren Sie die Daten. Etwas wie die Antwort auf diese question:

this.router.events.subscribe((event) => { 
// your refresh logic 
}