角度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(); 
}