表沒有在Angular 2中更新

Question

這是我的UsersList組件單擊表。一個新的頁面將被打開

在改變用戶價值和保存，保存的價值不是體現在電網首次。但是當我再次進行同樣的操作時，它正在得到反映。

下面是我保存用戶代碼

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

} 

我不明白的是，即使this.router.navigateByUrl（「用戶」）; 在保存接收到observable響應後調用，爲什麼第一次沒有在表中更新？

用戶編輯組分

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

用戶服務

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



    } 

} 

用戶列表組件

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


} 

用戶列表模板

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

我很感激有人能幫助我。

Answer 1

嘗試改變：

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

要：

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

或者：

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

我也面臨同樣的問題。對我來說工作的是成功保存用戶的詳細信息，我在提取整個用戶列表的服務中調用該函數。 所以，這樣，用戶列表就會更新到最新。

因此，在您的saveUser函數中，更新userService的函數後，請調用您的userService的讀取函數。 它應該更新你的userList。

Answer 3

也許Angular會重複使用組件，因爲路由保持不變，因此不會再次發佈ngOnInit？試着將你的用戶負載的邏輯在userlist.component在ngOnChanges或ngAfterViewInit鉤代替ngOnInit，像這樣：

ngAfterViewInit() { 

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

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

另一種方法，你可以嘗試是訂閱的路由變化事件在ngOnInit鉤，然後刷新數據。像這樣的答案question：

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