Подсчет количества строк (Всего / по значению) в таблице / * ngFor

Question

Может кто-нибудь сказать мне, как я могу получить общее значение строк в этой таблице, кроме того, я хочу, чтобы значение строк соответствовало истине или ложному условию состояния столбца.

https://stackblitz.com/edit/angular-g9twrl?embed=1&file=app/app.component.html

Answer 1

Вы также можете использовать этот

HTML

<div class="container mt-4">

         <p>
          Total rows: {{ getRowsValue(null) }} <br>
          State Active (true): {{ getRowsValue(true) }} <br>
          State Inactive (false): {{ getRowsValue(false) }}
          </p>

          <table class="table">
            <thead>
              <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">State</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of myItems; let i = index">
            <th>{{ i + 1 }}</th>
            <td>{{ item.name }}</td>
            <td>{{ item.description }}</td>
            <td>
              <mat-slide-toggle [checked]="item.state" (change)="item.state = !item.state"></mat-slide-toggle>
            </td>
              </tr>
            </tbody>
          </table>
        </div>

Компонент

import { Component } from '@angular/core';

        @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
        })
        export class AppComponent  {
          name = 'Angular 5';

          myItems: any[];

          constructor() {
            this.myItems = [
              { name: 'item 1', description: 'description 1', state: false },
              { name: 'item 2', description: 'description 2', state: true },
              { name: 'item 3', description: 'description 3', state: false },
              { name: 'item 4', description: 'description 4', state: true },
              { name: 'item 5', description: 'description 5', state: true },
            ]
          }

          public getRowsValue(flag) {
            if (flag === null) {
              return this.myItems.length;
            } else {
              return this.myItems.filter(i => (i.state == flag)).length;
            }
          }

        }

Answer 2

Добавьте эти геттеры в ваш компонент:

get totalRows(): number {
  return this.myItems.length;
}

get activeRows(): number {
  return this.myItems.filter(i => i.state).length;
}

get inactiveRows(): number {
  return this.myItems.filter(i => !i.state).length;
}

И в вашем шаблоне:

<p>
  Total rows: {{ totalRows }} <br>
  State Active (true): {{ activeRows }} <br>
  State Inactive (false): {{ inactiveRows }}
</p>

Если вы хотите, чтобы ползунки обновляли активный / неактивный счетчик, вам необходимо обновитьбазовое состояние при переключении ползунка:

<mat-slide-toggle [checked]="item.state" (change)="item.state = !item.state">
</mat-slide-toggle>