时间戳

首页 > 解决方案 > 项目加载时更改 Typescript 中的样式

html - 项目加载时更改 Typescript 中的样式

问题描述

例如，假设我有一个列表和一个包含数据的数组。

<ul class="list-group">
    <div *ngFor="let data of exampleArray">
        <li id="createId(...)" class="list-group-item">
              <div class="row">
                 CONTENT
              </div>                 
         </li>
     </div>
</ul>

和数组：

exampleArray = [{name:"A", type:"1"},{name:"B", type:"0"}...]

Type表示项目的背景颜色。（1 -> 绿色，0 -> 白色，-1 -> 红色）

我只想在行中显示“名称”。
问题是，我怎样才能为这些创建类似 onLoad 函数的东西，所以当我打开页面并加载名称时，项目将自动获取它们的样式类型。
中的每个项目li都有一个唯一的 id。

标签： htmlangulartypescript

解决方案

您可以使用 ngClass 根据项目类型为您的项目动态设置类：

在模板中：

<ul class="list-group">
    <div *ngFor="let data of exampleArray">
        <li class="list-group-item">
              <div class="row" [ngClass]="'type' + data.type">
                 {{data.name}}
              </div>                 
        </li>
     </div>
</ul>

大批：

exampleArray = [{name:"A", type:"1"},{name:"B", type:"0"}, {name:"C", type:"-1"}]

CSS：

.type1{
  background-color: green
}
.type0{
  background-color: white
}
.type-1{
  background-color: red
}

工作演示

推荐阅读