動的属性/パラメータをopenDialogに渡すにはどうすればよいですか？

Question

私は以下のID：59dc921ffedff606449abef5を動的にMatDialogに渡す必要があります。テストのために、私はそれをハードコードされたIDとして使用しています。

残念ながら、すべての検索と試行が失敗し、idを動的に関数呼び出しに取得できません。私も@inputの機能を試しましたが、それは役に立たなかった。

edit-dilog.component.ts：

export class EditDialogComponent implements OnInit { 
dialogResult:string = ''; 
constructor(public dialog:MatDialog, public loginService:LoginService){ } 
ngOnInit() {} 
openDialog() { 
    this.dialog.open(EditUserComponent, { data: '59dc921ffedff606449abef5' }) 
    .afterClosed() 
    .subscribe(result => this.dialogResult = result); 
} 

}

edit-user.component.ts：

export class EditUserComponent implements OnInit { 
    public message:any []; 
    public resData: {}; 
    constructor(public thisDialogRef: MatDialogRef<EditUserComponent>, 
        @Inject(MAT_DIALOG_DATA) public data: number, 
        public loginService: LoginService) { } 
     ngOnInit() { 
      this.loginService.getSingleUser(this.data) 
      .subscribe(data => { 
       this.resData = JSON.stringify(data); 
      }) 
     } 
     onCloseConfirm() { 
      this.thisDialogRef.close('Confirm'); 
     } 
     onCloseCancel() { 
      this.thisDialogRef.close('Cancel'); 
     } 
} 

IDがサービスでJSON応答から来ているログイン-service.ts：

getSingleUser(id) { 
    return this.http.get(environment.urlSingleUsers + '/' + id, this.options) 
    .map(res => { 
     console.log('RES: ' + JSON.stringify(res.json())); 
     return res.json(); 
    }).catch((error: any) => Observable.throw(error.json().error || 'Server error')); 
} 

extractData(result:Response):DialogUserData[] { 
    return result.json().message.map(issue => { 
     return { 
      ID: issue._id, 
      Email: issue.email, 
      Name: issue.fullName 
     } 
    }); 
} 

そして、ここで私がopenDialog()の呼び出し行う場所である：私はちょうどかかわらず、類似した何かをした

"message": [ 
    { 
    "_id": "59415f148911240fc812d393", 
    "email": "jane.doe@foo.de", 
    "fullName": "Jane Doe", 
    "__v": 0, 
    "created": "2017-06-14T16:06:44.457Z" 
    }, 
    { 
    "_id": "5943b80be8b8b605686a67fb", 
    "email": "john.doe@foo.de", 
    "fullName": "John Doe", 
    "__v": 0, 
    "created": "2017-06-16T10:50:51.180Z" 
    } 
] 

Answer 1

：ここでは、より明確にするため

<i class="material-icons" (click)="openDialog()">create</i> 

をJSONレスポンスが来る方法です私はちょっとあなたがコンポーネントに名前を付けることによってちょっと混乱しています。
あなたが試すことができます：最初の（ユーザ）データをフェッチして、（実際に）あなたの制御コンポーネントでダイアログを開きます。

編集dialog.component.ts：

openDialog(id: string) { 
    this.loginService.getSingleUser(id) 
    .subscribe(user=> { 
     const dialogRef = this.dialog.open(EditUserComponent, { 
     data: user 
     }); 

     dialogRef.afterClosed().subscribe(result => { 
     console.log(`Dialog result: ${result}`); 
     }); 
    }); 
} 

あなたは

編集user.component.ts：その後、ダイアログビューをレンダリングするためのダイアログデータ（ユーザー）にアクセスすることができます

このようにして

ngOnInit() { 
    console.log(this.data); 
} 

、あなたは動的にIDを渡すことができます：idはあなたの制御コンポーネントのメンバーにすることができ

<i class="material-icons" (click)="openDialog(id)">create</i> 

を。