Get keys of objects in an array?

Question

Angular

<picture *ngIf="image" class="al-image-container">
  <source
    *ngFor="let imageFormat of image.imageTypes"
    [srcset]="imageFormat.imageSizes.source"
    [type]="imageFormat.type"
    [media]="imageFormat.imageSizes.mediaQuerySize"
  >
  <img
    class="al-image"
    [src]="defaultImageSrc"
    [alt]="(image.alt || '') | translate"
  >
</picture>

const imageConfigObject: AlImage = {
    imageTypes: [
      {
        imageSizes: [
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.DESKTOP,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.LAPTOP_L,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.LAPTOP,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.TABLET,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.MOBILE,
            default: false,
          },
        ],
        type: ImageType.WEBP,
        default: false,
      },
      {
        imageSizes: [
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.DESKTOP,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.LAPTOP_L,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.LAPTOP,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.TABLET,
            default: false,
          },
          {
            source: `${imagesFolderPath}/webp/${imageName}.webp`,
            mediaQuerySize: MediaQuerySize.MOBILE,
            default: false,
          },
        ],
        type: imageExt === 'png' ? ImageType.PNG : ImageType.JPEG,
        default: true,
      },
    ],
    alt,
  };

export enum ImageType {
  WEBP = 'image/webp',
  JPEG = 'image/jpeg',
  PNG = 'image/png',
}

export enum MediaQuerySize {
  DESKTOP = '(max-width: 1920px)',
  LAPTOP_L = '(max-width: 1440px)',
  LAPTOP = '(max-width: 1024px)',
  TABLET = '(max-width: 768px)',
  MOBILE = '(max-width: 425px)',
}

export interface AlImageType {
  type: ImageType;
  default?: boolean;
  imageSizes: AlImageSize[];
}
export interface AlImageSize {
  source: string;
  mediaQuerySize: MediaQuerySize;
  default?: boolean;
}

export interface AlImage {
  imageTypes: AlImageType[];
  alt?: string;
}

Hello! At the moment I can't get the source and mediaQuerySize keys that need to be set to the template, how can I fix this problem??
[srcset]="imageFormat.imageSizes.source"
[media]="imageFormat.imageSizes.mediaQuerySize"