时间戳

首页 > 解决方案 > 如何根据Angular 7中[ngStyle]的值在1个单元格中划分背景？

html - 如何根据Angular 7中[ngStyle]的值在1个单元格中划分背景？

问题描述

我想在 Angular 7 html 中根据 SpringBoot API 的值使用 [ngStyle] 设置背景。在一行中，我将其分为 2，如果值为蓝色，则顶行背景将为蓝色，如果值为橙色，则背景为底行是橙色的。

我已经尝试过这种方式

<tbody *ngFor="let data of fData">
    <tr *ngFor="let task of tasks">
        <td nzLeft="0px">{{task.title}}</td>
        <td>{{data.actualStart}}</td>
        <td>{{data.actualFinish}}</td>
        <td>{{data.actualFinish - data.actualStart}}</td>
        <td>{{data.status}}</td>
        <td>{{data.keterangan}}</td>
        <td [ngStyle]="{'background-color': data.wplan32}">
            <div [ngStyle]="{'background-color': 
                             data.wplan32}"></div>
            <div [ngStyle]="{'background-color': 
                             data.wplan32}"></div>
        </td>
    </tr>
</tbody>

在css中我有这个，

.blue {
    background: rgb(0, 204, 255);
}

.orange {
    background: rgb(238, 255, 0);
}

我预计结果连续有2个背景，但基于我得到的行背景上方的代码是没有的。如果我添加

<div></div> value, example
<div>Blue</div>

我得到背景，但只针对角色而不是整行。我该如何解决这个问题？ 这是我想要的结果

标签： htmlcssangular

解决方案

而不是ngStyle你应该使用ngClass

 <td [ngClass]="{'blue': data.wplan32 === 'blue', 'orange': data.wplan32 === 'orange}"</td>

推荐阅读