计算表中的行数（总计/根据值） / * ngFor

Question

谁能告诉我如何获得该表中行的总值，另外我想要满足列属性的真或假条件的行的值。

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

Answer 1

您也可以使用这个

网页

<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;
            }
          }

        }