我有一个简单的“角度材质”对话框，该对话框应该显示有关某个人的一些数据。我正在显示的人员对象如下：
export interface Person {
prsName: string;
prsAddress: string;
prsCity: string;
prsState: string;
}
对话框的Typescript代码如下：
@Component({
selector: 'app-persondialog',
templateUrl: './persondialog.component.html',
styleUrls: ['./persondialog.component.css']
})
export class PersonDialogComponent {
constructor(public dialogRef: MatDialogRef<PersonDialogComponent>,
@Inject(MAT_DIALOG_DATA) public theInfo: Person) {
alert('Name: '+theInfo.prsName); /* temporary call to check the contents of theInfo */
}
onClose(): void {
this.dialogRef.close();
}
从我的主要组件调用的打开对话框的功能如下：
public getPerson(aName: string) {
const found = this.persGetter.findPerson(aName);
found.subscribe(info => {
alert('Person Name: ' + info.prsName + ' Address: ' + info.prsAddress); /* Temporary. This just shows that info has real data! */
const ref = this.theDlg.open(PersonDialogComponent, {
width: '300px',
data: { theInfo: info }
});
});
}
请注意，persGetter是一个HttpClient对象，该对象从我的服务器获取Person信息。
对话框的HTML如下：
<h1 mat-dialog-title>Person: {{ theInfo.prsName }}</h1>
<div mat-dialog-actions>
<button mat-button (click)="onClose()">Close</button>
</div>
该对话框在调用getPerson（）函数时显示，但是由于某种原因，在警报显示信息内容的时间与实际创建对话框之间，prsName属性变为未定义！
显然我缺少了一些东西。谁能告诉我如何将我的“个人”信息成功传递到此对话框中？
The problem is width the way you pass the data. You need to pass the complete data as a JSON. Refer this link for more details. theInfo is your object name and not the data itself.
要传递对象数据，需要修改对对话框的调用，如下所示
公共getPerson（aName：字符串）{ 找到const = this.persGetter.findPerson（aName）;
}
这将根据需要将Person类型的对象传递给对话框。
您应该将打开代码更改为此：
为了更好的“记录”：
您正在尝试访问错误的媒体资源，
用这个
或仅传递信息而不是对象