[英]How to pass JSON Response from service to MatDialog Window'?
I have a service where I execute a Http Request to fetch User data per ID... works fine. 我有一项服务,我在其中执行Http请求以获取每个ID的用户数据...工作正常。
In the other hand I do have a MatDialoge
where I need to display the JSON Response Data coming from the service. 另一方面,我确实有一个
MatDialoge
,需要在其中显示来自该服务的JSON响应数据。 The background for the process is to provide a possibility in the MatDialoge
to edit User Data, make changes, update and at the end execute another Http Request to update the user and close the dialog. 该过程的背景是在
MatDialoge
提供一种可能性,以编辑用户数据,进行更改,更新,最后执行另一个Http请求以更新用户并关闭对话框。 It means I would use a submit button inside MatDialog
to send the edited User/Employee Data. 这意味着我将在
MatDialog
使用提交按钮来发送已编辑的用户/员工数据。
My first issue I'am facing now is how do I pass the data coming from Response to the MatDialog
? 我现在面临的第一个问题是如何将来自Response的数据传递给
MatDialog
?
login.service.ts
: login.service.ts
:
getSingleUser(id) {
let obsSingleUsersRequest = this.http.get(environment.urlSingleUsers + '/' + id, this.options)
.map(res => {
return res.json();
}).catch( ( error: any) => Observable.throw(error.json().error || 'Server error') );
return obsSingleUsersRequest;
}
The component to execute and bind the button for MatDilog
edit-dialog.component.ts
: 用于执行和绑定
MatDilog
edit-dialog.component.ts
按钮edit-dialog.component.ts
:
import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from "@angular/forms";
import { MatDialog, MatDialogRef } from '@angular/material';
import { EditUserComponent } from './edit-user/edit-user.component';
import { LoginService } from '../../_service/index';
@Component({
selector: 'app-edit-dialog',
templateUrl: './edit-dialog.component.html',
styleUrls: ['./edit-dialog.component.css']
})
export class EditDialogComponent implements OnInit {
dialogResult:string = '';
constructor(public dialog:MatDialog, public loginService:LoginService) {}
ngOnInit() {}
openDialog() {
let dialogRef = this.dialog.open(EditUserComponent, {
width: '600px'
});
this.loginService.getSingleUser('59dc921ffedff606449abef5')
.subscribe((res) => {
console.log('User Data EDIT DIALOG: ' + JSON.stringify(res) );
},
(err) => {
err;
console.log('IN COMPONENT: ' + err);
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog closed: ${result}`);
this.dialogResult = result;
})
}
}
The Dialog Window component where I would like to display JSON Data Response and edit them. 我想在其中显示JSON数据响应并对其进行编辑的Dialog Window组件。
edit-user.component.ts
: edit-user.component.ts
:
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { LoginService } from '../../../_service/index';
@Component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {
constructor(
public thisDialogRef: MatDialogRef<EditUserComponent>,
@Inject(MAT_DIALOG_DATA) public data: string) { }
ngOnInit() {}
onCloseConfirm() {
this.thisDialogRef.close('Confirm');
}
onCloseCancel() {
this.thisDialogRef.close('Cancel');
}
}
edit-dilog.component.html
: edit-dilog.component.html
:
<mat-card-content>
<mat-button-group>
<i class="material-icons" (click)="openDialog()">create</i>
</mat-button-group>
</mat-card-content>
Fetch JSON then open dialog 提取JSON然后打开对话框
openDialog() { this.loginService.getSingleUser('59dc921ffedff606449abef5') .map(data => { return this.dialog.open(EditUserComponent, { data: data }).afterClosed(); }).subscribe(result => this.dialogResult = result); }
-- or -- - 要么 -
Open dialog immediately 立即打开对话框
openDialog() { let request = this.loginService.getSingleUser('59dc921ffedff606449abef5'); this.dialog.open(EditUserComponent, { data: request }) .afterClosed() .subscribe(result => this.dialogResult = result); }
then in dialog component: 然后在对话框组件中:
constructor( public thisDialogRef: MatDialogRef<EditUserComponent>, @Inject(MAT_DIALOG_DATA) public data: Observable<any>) { } ngOninit() { this.data.subscribe(data => /* do stuff */); }
-- even better -- -甚至更好-
inject service into dialog 将服务注入对话框
openDialog() { this.dialog.open(EditUserComponent, { data: '59dc921ffedff606449abef5' }) .afterClosed() .subscribe(result => this.dialogResult = result); }
then in dialog component: 然后在对话框组件中:
constructor( public thisDialogRef: MatDialogRef<EditUserComponent>, @Inject(MAT_DIALOG_DATA) public data: string, public loginService: LoginService) { } ngOninit() { this.loginService.getSingleUser(data) .subscribe(data => /* do stuff */); }
https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component- https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.