在模態對話框中編輯表格數據

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。

希望這會有所幫助！