Question

我想基于SpringBoot API中带有[ngStyle]的值在Angular 7 html中设置背景。在一行中，我将其分为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>

我得到背景，但只获得角色的角色，而不是整个行的角色。我该如何解决这个问题？ Here is the result that I want

Answer 1

您应该使用ngStyle代替ngClass

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

如何根据Angular 7中[ngStyle]的值在1个单元格<td> </td>中划分背景？

1 个答案: