Question

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

<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。

Answer 1

您可以使用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
}

工作demo

加载项目时更改打字稿中的样式

1 个答案: