时间戳

首页 > 解决方案 > 是否可以将打字稿作为颜色值导入 html 或在打字稿中从 html 编辑颜色值

html - 是否可以将打字稿作为颜色值导入 html 或在打字稿中从 html 编辑颜色值

问题描述

我已经在这段代码上工作了两天了。我正在使用 Angular 创建一个 Web 应用程序，当它们达到某个值时，我需要一些数字来改变颜色。（示例：如果 num > 45 color = green else color = red）我希望能够在我的打字稿和 HTML 之间传递颜色的值，但我遇到了麻烦。颜色值可以很好地传递给 HTML，但我不能将颜色值放入任何类型的样式中。这是我的代码。谢谢您的帮助！

打字稿：

colorOption=''

if(this.Classyaverage > 45){
  console.log('red')
  this.colorOption='#FF0000'
}
else{
  console.log('green')
  this.colorOption='#00FF00'
}

HTML：

<body>
    <div class="pagecolor">

    <div class="box">

      <canvas class="offset"
      id="lineChart" 
      width="240"
      height="180" 
      >
      </canvas>

      //This is what I want...

      <style>
       h1{ color:{{colorOption}};}
      </style>

      <h1>
        {{Classyaverage}}
      </h1>

    </div>

  </div>
</body>

那么我不能像那样导入 Typescript，是否可以将 HTML 或 CSS 导出到 typescript 中？

标签： htmlcssangulartypescript

解决方案

我认为您正在寻找的是 ngClass 指令。这是来自 Angular 的文档。https://campuslabs.visualstudio.com/Student%20Assessment/_workitems/edit/59235

// .css

.red{
  color: #f00;
} 

.green: {
 color: #0f0
}

-

// .html

<h1 [ngClass]="{'red': Classyaverage > 45, 'green': Classyaverage <= 45}"></h1>

推荐阅读