Question

我对Angular 5的学习非常新，我只想询问如何在数字增加后得到数字的总值。

到目前为止，我正在按照教程进行操作，我正在使用*ngFor，但我想要的是这个......

但我得到的就是这个。

这是我的代码。

<div class="card-footer clearfix" *ngFor="let item of items">
    <div class="float-left p-2">
        <i class="fa fa-circle green-text" aria-hidden="true" mdbTooltip="Active Item" placement="bottom"></i><small class="text-muted"> 0</small>
        <i class="fa fa-circle-o grey-text ml-3" aria-hidden="true" mdbTooltip="Inactive Item" placement="bottom"></i><small class="text-muted"> 0</small>
    </div>
    <div class="float-right">
        <a class="btn btn-link btn-sm waves-light" mdbWavesEffect>View Details</a>
    </div>
</div>

我的数据字段为item.status，其值为零且仅为1。如果item.status的值为零，则灰色圆圈旁边的数字将递增，而如果item.status值为1，则绿色圆圈旁边的数字将递增。

如果*ngFor正确使用我的关注，我也会感到困惑。

感谢任何帮助，谢谢。

Answer 1

ngFor不是您想要做的正确选择。当您想要渲染多个UI元素时，将使用ngFor。在您的代码示例中，此行表示“为数组items中的每个元素渲染一个div”。

在TypeScript代码中编写一个循环，根据您描述的应用程序逻辑计算两个数字。在组件模板中，将这些数字绑定到相应的圆圈旁边。

Answer 2

你应该在你的打字稿旁边循环，并将总计数值绑定到html。

TS

let totalOneCount = 0;
let totalZeroCount = 0;

for(i=0;i<item.length;i++){
        if(item[i].status == 1) {
             totalOneCount++;
             continue;
         }
        totalZeroCount++;
    }

HTML

<div class="card-footer clearfix">
<div class="float-left p-2">
    <i class="fa fa-circle green-text" aria-hidden="true" mdbTooltip="Active Item" placement="bottom"></i><small class="text-muted"> {{totalOneCount}}</small>
    <i class="fa fa-circle-o grey-text ml-3" aria-hidden="true" mdbTooltip="Inactive Item" placement="bottom"></i><small class="text-muted"> {{totalZeroCount}}</small>
</div>
<div class="float-right">
    <a class="btn btn-link btn-sm waves-light" mdbWavesEffect>View Details</a>
</div>
</div>

我希望这会有所帮助。如果不起作用，请随时与我联系。

如何在增量后得到数字的总值

2 个答案: