[英]Angular 14 - Getting data out of angular material dialog
I'm looking to get data out from my material dialog that uses a ng-template.我希望从使用 ng-template 的材质对话框中获取数据。 I'm getting a Property 'data' does not exist on type 'MeetingsComponent'.
我得到一个属性“数据”在类型“MeetingsComponent”上不存在。 when trying to use this line.
尝试使用此行时。
<button mat-raised-button [mat-dialog-close]="data" cdkFocusInitial>Save</button>
This is my full code for the template:这是我的模板的完整代码:
<ng-template #editMeeting>
<mat-dialog-content>
<mat-form-field appearance="outline">
<mat-label>Meeting Name</mat-label>
<input #name matInput type="text" autocomplete="off"/>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Meeting Location</mat-label>
<input #location matInput type="text" autocomplete="off"/>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Choose a date</mat-label>
<input #date matInput [matDatepicker]="picker">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-dialog-content>
<div mat-dialog-actions>
<button mat-raised-button mat-dialog-close>Close</button>
<button mat-raised-button [mat-dialog-close]="data" cdkFocusInitial>Save</button>
</div>
</ng-template>
This line is called to open dialog:调用此行以打开对话框:
<button mat-raised-button type="button" (click)="edit(editMeeting, row)">Edit</button>
And this is the edit function being called:这是被调用的编辑 function:
edit(content: any, row: any): void {
this.matDialog.open(content, {
data: {name: row.name}
})
console.log(row)
}
I know this isn't the best way to render dialog content, but just for speed right now, this is the way I'm doing it.我知道这不是呈现对话框内容的最佳方式,但现在只是为了速度,这就是我正在做的方式。 Let me know if I left out any needed code.
如果我遗漏了任何需要的代码,请告诉我。
In your dialog component, you need to declare data object to receive from parent in component's constructure.在您的对话框组件中,您需要声明数据 object 以在组件的构造中从父级接收。
constructor(@Inject(MAT_DIALOG_DATA) public data: any) { ...}
Full example: Stackblitz完整示例: Stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.