This is how my interfaces look like:

export interface Services {
  [section: number]: [
    {
      uid: number,
      service: string,
      description: string,
      hourlyRate: number,
      hours: number,
      price: number,
      serviceIsDisabled: boolean,
      serviceIsMandatory: boolean
    }
  ]
}

export interface ServiceDataToDialog {
  key: number,
  section: number,
  [section: number]: {
    service: string,
    description: string,
    hourlyRate: number,
    hours: number,
    price: number,
    serviceIsDisabled: boolean,
    serviceIsMandatory: boolean,
    officialHourlyRate: number,
    allServices: Array<Services>
  }
}

I am trying to get the value of service from the interface Services.

This is what I have tried:

constructor(private _dialogRef: MatDialogRef<DialogServiceTabletAddRowComponent>, private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: ServiceDataToDialog) {
  console.log(data[0].allServices?.[0]?.[0], 'Object of allServices');
  console.log(data[0].allServices?.[0]?.[0]?.[0]?.service, 'A service');

And this is what I get:

Why is the second console.log undefined??

I have also tried it with data[0].allServices?.[0]?.[0].service but then I get this error:

TS2339: Property 'service' does not exist on type '[{ uid: number; service: string; description: string; hourlyRate: number; hours: number; price: number; serviceIsDisabled: boolean; serviceIsMandatory: boolean; }]'.

CodePudding user response：

I don’t know you data structure but I think your interface definition is incorrect. Try changing it to:

export interface Services {
  [section: number]:{
      uid: number,
      service: string,
      description: string,
      hourlyRate: number,
      hours: number,
      price: number,
      serviceIsDisabled: boolean,
      serviceIsMandatory: boolean
  }
}