I am currently working on creating an object that aligns with my interface structure.
Success Story
export interface ServiceDataToDialog {
id: number,
service: string,
}
constructor(private _dialogRef: MatDialogRef<DialogServiceTabletAddRowComponent>, private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: ServiceDataToDialog) {
data.id = 1;
this.mainForm.valueChanges.subscribe(value => {
data.service = value.service;
However, I aim to have a nested object. This is the approach I took:
Struggle Zone
export interface ServiceDataToDialog {
[id: number]: {
service: string,
}
}
constructor(private _dialogRef: MatDialogRef<DialogServiceTabletAddRowComponent>, private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: ServiceDataToDialog) {
data.id = 1;
this.mainForm.valueChanges.subscribe(value => {
data.id.service = value.service;
This results in the error message:
TS2339: Property 'id' does not exist on type 'ServiceDataToDialog'.
Desired Outcome
{
1: {
service: "My Service"
}
}
Here's another attempt I made:
export interface ServiceDataToDialog {
id: {
service: string,
}
}
constructor(private _dialogRef: MatDialogRef<DialogServiceTabletAddRowComponent>, private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: ServiceDataToDialog) {
data[1] = data.id;
this.mainForm.valueChanges.subscribe(value => {
data.service = value.service;
Yet, this leads to the following error:
TS7053: Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'ServiceDataToDialog'. Property '1' does not exist on type 'ServiceDataToDialog'.
Can you identify what's causing the issue in my code?