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

}

我不明白的是即使这个.router.navigateByUrl（“用户”）; 在save收到来自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');
        }    



   }

}

用户列表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);
  }


}

用户列表模板

<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的read函数。它应该更新你的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
}

表格未在Angular 2中更新

3 个答案: