Bearbeiten Sie die Formulardaten in einem modalen Dialogfeld

Question

Bitte helfen Sie mir den unten beschriebenen Fehler zu beheben.

Ich habe die Liste der Daten in einer Tabelle, die auf bearbeiten erscheint ein Dialog wie in den Screenshots gezeigt:

Ich Passing eine ID mit meinem Dialog 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> 

Ich versuchte, die id t Anzeigen Hut ist in der Funktion openDialogEdit() übergeben, aber ich bekomme den Wert undefined in der Konsole und aufgrund dessen meine Bearbeitungsformular Felder leer sind.

Answer 1

Das Übergeben von Daten an mdDialog erfordert etwas zusätzliche Arbeit. Sie müssen die id folgende Art und Weise weitergeben müssen:

in

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

Dann wird die mdDialog Sie haben den Wert abzurufen:

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

Und dann können Sie einer Variablen zuweisen:

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

Vergessen Sie nicht, folgende zwei Importanweisungen hinzuzufügen:

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

Hier ist ein einfaches demo

I dieser article bezeichnet, wenn ich Daten Lernen wurde mdDialog vorbei.

Hoffe, das hilft!