在模式对话框中编辑表单数据

Question

请帮我修复下面描述的错误。

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

我正在通过对话框openDialogEdit()传递ID。

<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语句：

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

这是一个简单的demo

我在学习将数据传递给mdDialog时提到了这个article。

希望这有帮助！