Невозможно добавить несколько стилей с помощью ngStyle

Question

Я пытаюсь добавить стиль высоты и ширины к элементу img, используя ngStyle:

<img class="image-full-view" [ngStyle]="{'height': selectedImage.heightSize, 'width': selectedImage.widthSize}" [src]="selectedImage.imagePath" alt="Man Praying"> 

Информация об изображении поступает от объекта, который создан в служебном файле:

 private images = [
        new Image('Man Praying', 1, 'Cambodia', 'Man praying to Sun', '£100', '../../assets/Images/Cambodia/Praying to the Sun.JPG', '250px', '800px'), 
]

Высота составляет 250 пикселей, а ширина - 800 пикселей.

Здесь конструктор объекта создается в отдельном файле модели:

export class Image {
public name: string;
public id: number;
public album: string;
public description: string;
public price: any;
public imagePath: string;
public heightSize: any;
public widthSize: any;


constructor(name: string, id: number, album: string, description: string, price: any, imagePath: string, heightSize: any, widthSize: any) {
    this.name = name;
    this.id = id;
    this.album = album;
    this.description = description;
    this.price = price;
    this.imagePath = imagePath;
    this.heightSize = heightSize;
    this.widthSize = widthSize;
}
}

Высота изображения правильно применяется к элемент, но ширина не. Я подтвердил это, осмотрев элемент с помощью инструментов Chrome dev. Есть ли что-то, чего мне здесь не хватает, так как я не могу понять, в чем проблема?

Вот как этот элемент отображается в chrome dev tools:

<img _ngcontent-vxx-c18="" alt="Man Praying" class="image-full-view" ng-reflect-ng-style="[object Object]" src="../../assets/Images/Cambodia/Praying to the Sun.JPG" style="height: 250px;">

I проверил весь мой код, чтобы убедиться, что ширина изображения не установлена ​​в другой таблице стилей.

Answer 1

Кажется, что точка с запятой в конструкторе объектов была проблемой:

export class Image {
    public name: string;
    public id: number;
    public album: string;
    public description: string;
    public price: any;
    public imagePath: string;
    public heightSize: any;
    public widthSize: any


    constructor(name: string, id: number, album: string, description: string, price: any, imagePath: string, heightSize: any, widthSize: any) {
        this.name = name;
        this.id = id;
        this.album = album;
        this.description = description;
        this.price = price;
        this.imagePath = imagePath;
        this.heightSize = heightSize;
        this.widthSize = widthSize;
    }
}

С рекомендацией Брайана:

    export class Image {

    constructor(
        public name: string,
        public id: number,
        public album: string,
        public description: string,
        public price: any,
        public imagePath: string,
        public heightSize: any,
        public widthSize: any) {}
}

Глупая ошибка!

Answer 2

Чтобы использовать несколько стилей ngStyles, вы можете добавить метод, который его возвращает:

HTML:

[ngStyle]="imageStyle()"

TS:

imageStyle(): object {
    return {
        height: this.image.heightSize ? this.image.heightSize : '',
        width: this.image.widthSize ? this.image.widthSize : ''
    };
}