@prolina

Получить ключи объектов в массиве?

<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;
}

Здравствуйте! В данный момент не могу получить ключи source и mediaQuerySize, которые нужно засэтать в тэмлпейт, как можно пофиксить данную проблему??
[srcset]="imageFormat.imageSizes.source"
[media]="imageFormat.imageSizes.mediaQuerySize"
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы