Css 无法使用ngStyle添加多个样式

我正在尝试使用ngStyle向img元素添加高度和宽度样式：

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

高度为250px，宽度为800px

这是在单独的模型文件中创建对象构造函数的地方：

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开发工具检查元素确认了这一点。当我看不出问题所在时，我是否遗漏了什么

这是chrome开发工具中元素的显示方式：

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

---

我已检查了所有代码，以确保未在其他样式表中设置图像宽度。

若要使用多个ngStyles，您可以添加一个返回它的方法：

HTML:

TS:

---

似乎对象构造函数中的分号就是问题所在：

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) {}
}

---

愚蠢的错误

基于渲染元素，图像对象上的widthSize设置不正确。我刚刚意识到我在OP上放置了错误的组件img标记。但问题仍然存在。我已经彻底检查了我的代码，仍然看不出问题出在哪里。我会用一些与directyl无关的信息来更新帖子，但是你可以简写你的整个图像对象，比如类image{constructorpublic name:string，public id；number等等，…，public widthSize:any{}，避免写所有的属性和赋值Hanks bryan，我会记住这一点，你有没有尝试记录并查看widthsize的值？什么是不正确的答案。在ngStyle中使用多个样式不需要方法返回，这样做是非常糟糕的做法，因为这是一个性能DragtHank对于bryan的响应是正确的，您可以在每个更改检测周期中直接将多个样式设置为模板evaluate中的ngStylefunction调用。文字不需要。模板中的函数调用应该总是避免的，但如果您需要一个友好的样式，那么这是必要的。为什么否决？这解决了问题。我理解这是一个打字错误，但我被否决票弄糊涂了

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

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) {}
}