在模态对话框中编辑表格数据

Question

请帮我解决下面描述的错误。

我有数据的一个表中的列表，它在编辑时显示一个对话框，如图所示截图：

我传递一个id与我的对话openDialogEdit()。

<button md-mini-fab class="example-fab" color="primary" (click)= "openDialogEdit(role.id);"> 

RolesComponent(MdDialog)：

export class RolesComponent implements OnInit { 
    @Input() role: Role; 
    @Output() roleDeleted = new EventEmitter<Role>(); 
    id: number; 
    role_name: string; 
    status: boolean; 


    constructor(private roleService: RoleService, public dialog: MdDialog) { } 

    roles: Role[]; 

    ngOnInit() { 
    this.onRoles() 
    } 
    onDelete() { 
    this.roleService.deleteRole(this.role.id) 
     .subscribe(
     () => { 
      this.roleDeleted.emit(this.role) 
      console.log('Roles Deleted'); 
     } 
    ); 
    } 

    onRoles() { 
    this.roleService.Roles() 
     .subscribe(
      (roles: Role[]) => this.roles = roles, 
      (error: Response) => console.log(error) 
     ); 
    } 
    onDeleted(role: Role) { 
    const position = this.roles.findIndex(
     (roleEl: Role) => { 


     return roleEl.id == role.id; 
     } 
    ); 
    this.roles.splice(position, 1); 

    } 
    openDialogEdit(id) { 
    console.log(this.id); 
    alert(this.id); 
    return this.dialog.open(RoleEditForm, this.id); 
    } 
} 

RolesComponent(MdDialogRef)：

export class RoleEditForm { 
    @Input() role: Role; 
    @Output() roleDeleted = new EventEmitter<Role>(); 
    id: number; 
    role_name: string; 
    status: boolean; 
    // id = this.role.id; 
    // role_name = this.role.role_name; 
    // status = this.role.status; 
    constructor(private roleService : RoleService, public dialogRef: MdDialogRef<RoleEditForm>) { } 

    ngOnInit() { 
    this.onEdit(); 
    } 
    onEdit() { 


    this.dialogRef.componentInstance.id = this.role.id; 
    this.dialogRef.componentInstance.role_name = this.role.role_name; 
    this.dialogRef.componentInstance.status = this.role.status; 
    } 
    onCancel() { 
    this.dialogRef.close(); 
    } 
    onUpdate() { 
    this.roleService.updateRole(this.id, this.role_name, this.status) 
     .subscribe(
      (role: Role) => { 
      this.role.id = this.id; 
      this.id = 0; 
      this.role.role_name = this.role_name; 
      this.role_name = ''; 
      this.role.status = this.status; 
      this.status = false; 
      } 
     ); 
    } 
} 

Editable form：

<form #f="ngForm" (ngSubmit) = "onUpdate(f)"> 
     <h1 md-dialog-title>Dialog</h1> 
     <div md-dialog-content> 

       <div class="form-group"> 
        <md-input-container class="example-full-width"> 
         <input mdInput type="text" id="role_name" name="role_name" [(ngModel)]="role.role_name" #role_name ngControl="role_name" placeholder="Role Name"> 
        </md-input-container> 
       </div> 


       <md-slide-toggle 
        class="example-margin" 
        [color]="color" 
        [checked]="checked" 
        [disabled]="disabled"> 
       Is Active? 
       </md-slide-toggle> 

     </div> 
     <div md-dialog-actions> 
      <button type="button" class="btn btn-primary" (click)= "onUpdate()">Save</button> 
      <button type="button" class="btn btn-primary" (click)= "onCancel()">Cancel</button> 
     </div> 
    </form> 

我试图显示id吨帽子在功能openDialogEdit()中传递，但我在控制台中获取值undefined，因此我的编辑表单字段为空。

Answer 1

传递数据到mdDialog需要一点额外的工作。你需要通过id方式如下：

openDialogEdit(idToPass) { 
    console.log(this.id); 
    alert(this.id); 
    return this.dialog.open(RoleEditForm, , { 
     data: { 
      id: idToPass 
     } 
     }); 
    } 

然后在mdDialog，你必须检索值：

constructor(@Inject(MD_DIALOG_DATA) private data: { passedId: number }, 
      private roleService : RoleService, 
      public dialogRef: MdDialogRef<RoleEditForm>) { } 

然后你就可以分配给一个变量：

ngOnInit() { 
    this.id = this.data.passedId; 
    this.onEdit(); 
    } 

不要忘记添加以下两条导入语句：

import { Component, Inject, OnInit } from "@angular/core"; 
import { MdDialogRef, MD_DIALOG_DATA } from "@angular/material"; 

下面是一个简单demo

我提到这article当我学习将数据传递到mdDialog。

希望这会有所帮助！