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 = userData;

提交的代码如下：

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

接下来，当您的提交按钮被点击时，您必须再次订阅网络服务数据，如下所示

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

值更改时，Angular 2表未更新

1 个答案: