Как получить общее значение числа после приращения

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 и значением только ноль и единица. Если значение item.status равно нулю, число рядом с серым кружком будет увеличиваться, а число рядом с зеленым кружком будет увеличиваться, если значение item.status равно единице.

также я запутался, если *ngFor правильно использует мою заботу или нет.

Любая помощь приветствуется, спасибо.

Answer 1

Вы должны зациклить на своей машинописи и привязать значения общего количества к html.

---

ц

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>

---

Надеюсь, это поможет. Если это не работает, не стесняйтесь связаться со мной с комментариями.

Answer 2

ngFor не правильный выбор для того, что вы хотите сделать. ngFor используется, когда вы хотите визуализировать несколько элементов пользовательского интерфейса. В вашем примере кода эта строка означает «визуализировать один div для каждого элемента в массиве items».

Напишите цикл в коде TypeScript, вычисляющий два числа на основе логики приложения, которую вы описали В шаблоне компонента свяжите эти числа рядом с соответствующими кружками.