Question

我正在使用带有Bootstrap 4卡的Angular 9应用NGFOR来绘制尽可能多的来自数据库的元素。

我为该卡设置了以下具有不同样式的数组，我希望将它们以随机的方式应用于每张卡片。

public color_border = ["border-left-warning", "border-left-info", "border-left-primary"]

卡代码如下：div卡的border-left-info必须更改。我尝试了一个新的NGFOR，但是它复制了所有内容。

<!-- Pending Requests Card Example -->
    <div class="col-xl-3 col-md-6 mb-4" *ngFor="let data of miDataInterior.DatagreenhouseRecuperado; let i = index">
         <div class="card border-left-info shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">{{data.medidas[0].sensor_type[0].name_comun}}</div>
                <font SIZE=3> {{data.medidas[0].marca}} </font>
                                    <font SIZE=3>({{data.medidas[0].recvTime | date:'dd-MM-yy h:mm:ss a'}})</font>
                <div class="h5 mb-0 font-weight-bold text-gray-800">{{data.medidas[0].attrValue | number:'1.0-1'}} {{data.medidas[0].sensor_type[0].medida}}</div>

              </div>
              <div class="col-auto">
                <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

我如何应用该div的color_border变量中包含的内容？

错误：

<!-- Pending Requests Card Example -->
    <div class="col-xl-3 col-md-6 mb-4" *ngFor="let data of miDataInterior.DatagreenhouseRecuperado; let i = index">
      <div *ngFor="let color_border of color_border" class="card {{color_border}} shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">{{data.medidas[0].sensor_type[0].name_comun}}</div>
                <font SIZE=3> {{data.medidas[0].marca}} </font>
                                    <font SIZE=3>({{data.medidas[0].recvTime | date:'dd-MM-yy h:mm:ss a'}})</font>
                <div class="h5 mb-0 font-weight-bold text-gray-800">{{data.medidas[0].attrValue | number:'1.0-1'}} {{data.medidas[0].sensor_type[0].medida}}</div>

              </div>
              <div class="col-auto">
                <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

感谢您的帮助。

编辑

我直接在NGCLASS上进行测试，问题是它仅显示数组中最后一个元素的样式。我该如何解决？

<div  class="card shadow h-100 py-2" [ngClass]="['border-left-primary', 'border-left-info', 'border-left-warning']">

Answer 1

备用边框

[ngClass]="color_border[i%3]"

您需要一个随机函数（您不能在.html中使用Math）

[ngClass]="getRandomColor()"

getRandomColor()
{
   return this.color_border[Math.floor(Math.random()*this.color_border.length]
}

如果miDataInterior.DatagreenhouseRecuperado具有从0到2的“颜色”属性，则可以使用

[ngClass]="color_border[data.color]"

请注意，有几种使用[ngClass]的方法，请参见docs

Answer 2

尝试一下。

<div *ngFor="let color_border of color_border" class="card shadow h-100 py-2 " [ngClass]="{{color_border}}">

将不同样式应用于引导卡

2 个答案: