角度2表在值更改时未更新

Question

我有一个包含用户详细信息的表，该表使用ngOnInit（）加载。

“创建用户”按钮打开另一个表单，让我添加一个新用户。用户被添加到数据库中，但该表不会被新用户更新。我如何实现这一目标？

代码是如下：

import { Component, OnInit } from '@angular/core'; 
import { IUsermgmt } from './usermgmtinterface'; 
import { UsermgmtService } from './usermgmt.service'; 

@Component({ 
selector: 'um-user', 
styleUrls: ['./usermgmt-list.component.css'], 
templateUrl: './usermgmt-list.component.html' 
}) 
export class UserListComponent implements OnInit{ 
    errorMessage: string; 
    usermgmt: IUsermgmt[]; 

constructor(private _usermgmtService: UsermgmtService,private  userPosterService:FormPosterUser){ 
    } 

updateTable(userData){ 
    this.usermgmt = userData; 
    this._usermgmtService.getUserlist() 
      .subscribe(
       usermgmt => {      
        this.usermgmt = usermgmt; 
        console.log("inside Update table function" +JSON.stringify(this.usermgmt)); 
       }, 
       error => this.errorMessage = <any>error); 
    } 

ngOnInit(): void { 
     this._usermgmtService.getUserlist() 
      .subscribe(
       usermgmt => this.usermgmt = usermgmt, 
       error => this.errorMessage = <any>error); 
    } 

} 

下面的行表中的犯规反映 this.usermgmt =用户数据;

代码提交如下：

submitForm(form: NgForm) { 
    // validate form 

    this.formposteruser.postUserForm(this.model) 
     .subscribe(
      data => { 
      console.log('success: ', data); 
      this.us.getUserlist() 
       .subscribe(
        usermgmt =>{ 
          this.usermgmt = usermgmt; 
          this.userService.updateTable(this.usermgmt);   
        }, 
        error => this.errorMessage = <any>error); 
      }, 
      err => console.log('error: ', err) 
     ); 
    } 

我如何反映在表中的新usermgmt数据？

HTML代码

<div class='panel panel-primary'> 
<div class='panel-heading'> 
    <button class="btn btn-sucess"> <a [routerLink]="['/newuser']">Create New User</a> </button> 
    <button class="btn btn-danger pull-right" (click)=onDeleteClick()>Delete User</button> 
</div> 

<div class='panel-body'> 
    <div class='row'> 
     <div class='col-md-4'>Search by UserName: </div> 
     <div class='col-md-4'> 
      <input type='text' 
      [(ngModel)] = 'listFilter'/> 
     </div> 
    </div> 
    <div class="nestedcomponent"> 
    <div class='table-responsive'> 
     <table class='table' 
        *ngIf='usermgmt && usermgmt.length'> 
      <thead> 
       <tr> 
        <th>{{usermgmt.length}}</th> 
        <th>User name</th> 
        <th>User Group</th> 
       </tr> 
      </thead> 
      <tbody> 
        <tr *ngFor='let usermgmt of usermgmt | usermgmtFilter:listFilter'> 
         <td> 
          <input #{{usermgmt.emp_num}} [(ngModel)]="usermgmt.selected" type="checkbox" (change)="checkbox(usermgmt)"> 
         </td> 
         <td [routerLink]="['/userEdit']" (click)="onTableSelect(usermgmt)">{{ usermgmt.user_name}}</td> 
         <td>{{ usermgmt.ug_desc|| 'Unassigned'}}</td> 
        </tr> 
      </tbody>    
     </table>    
</div> 

请帮助。提前致谢。

Answer 1

首先，独立的服务请求到另一个函数如下

getUserList(){ 
    this._usermgmtService.getUserlist() 
      .subscribe(
       usermgmt => this.usermgmt = usermgmt, 
       error => this.errorMessage = <any>error); 
    } 
} 

下，当你提交按钮被击中，你必须重新订阅该web服务数据如下

updateTable(userData){ 
    this.usermgmt = userData; 
    this._usermgmtService.getUserlist() 
      .subscribe(
       usermgmt => {      
        this.usermgmt = usermgmt; 
        console.log("inside Update table function" +JSON.stringify(this.usermgmt)); 
       }, 
       error => this.errorMessage = <any>error); 
    this.getUserList(); 
    } 

此外，在您的ngOnInit（）确保您使用声明的函数getUserList（），如下所示

ngOnInit(): void { 
     this.getUserList(); 
}