Question

我需要将以下ID：d_h动态传递给59dc921ffedff606449abef5。对于测试建议我将其用作硬编码ID。

不幸的是我的所有搜索和尝试都失败了，我无法动态地将id添加到函数调用中。我也尝试了MatDialog功能，但没有帮助。

@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

该ID来自服务中的JSON响应 login-service.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');
      }
}

这是我拨打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()

如需更多说明，请参阅JSON响应：

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

Answer 1

我刚刚做了类似的事情，虽然我对你如何命名组件感到有点困惑（似乎应该是相反的方式）。
您可以尝试：首先获取数据（用户），然后（实际）打开控制组件中的对话框：

修改-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：

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

其中id可以是您的控制组件的成员。

如何将动态属性/参数传递给openDialog？

1 个答案: