如何通过打字稿设置HTMLElement

Question

我有尝试在Typescript中设置变量的代码：

这是我使用的CSS数组：

css = {
  on: {
    "color": "#0b5eed",
    "class": "iconactive"
  },
  off: {
    "color": "#999999",
    "class": "icoinactive"
  },
  opened: {
    "display": "block",
    "maxHeight": "500px",
    "marginRight": "55px",
    "width": "245px",
    "float": "right",
    "transition": "ease-in-out 800ms max-height"
  },
  closed: {
    "display": "none",
    "maxHeight": "135px",
    "transition": "ease-in-out 700ms max-height"
  },//Setting bubble and notepaper for no text initial loading
  moveablecontainer: {
    iftext: {
      "width": "400px"
    },
    ifnotext: {
      width: "100px" //initial load
    }
  },
  boxopened: {
    iftext: {
      "width": "295px"
    },
    ifnotext: {
      "width": "0px", //initial load
    }
  }
}

这是我使用CSS Array元素的功能：

showHidePaperroll(showhidetape) {
  // console.log("In Show Hide paperroll");
  let movecontainer: HTMLElement = document.getElementsByClassName('moveablecontainer')[0] as HTMLElement;
  let paperRoll: HTMLElement = document.getElementsByClassName('box')[0] as HTMLElement;

  if (showhidetape) {
    paperRoll.style.display = this.css.opened.display;
    movecontainer.style.maxHeight = this.css.opened.maxHeight;
    // console.log("PaperBox is opened");
  } else {
    paperRoll.style.display = this.css.closed.display;
    movecontainer.style.maxHeight = this.css.closed.maxHeight;
    // console.log("PaperBox is closed");
  }

}

问题是，方程式的左端（即movecontainer.style.maxHeight）未设置，尽管当我通过调试器时，movecontainer.style.maxHeight“确实存在”并且this.css.closed .maxHeight =“”

我知道我可能可以使用ngStyle解决方案，但我想看看为什么“ this”不起作用或更具体地说，“ UNDERSTAND”为什么不起作用。

注意：我在该组件的scss文件中存在moveablecontainer和box。