Показать количество строк, сгенерированных ngFor * Angular 6

Question

У меня есть компонент, который отображает результаты поиска.Это список таблиц, где каждая таблица представляет собой процент элементов, содержащихся в химическом анализе для серии (у нее есть уникальный идентификатор).Я хочу отобразить количество серий в верхней части моего компонента, т.е. количество элементов в массиве keys

element.component.html:

    <ul class="cert-result">
      <li *ngFor="let key of objectKey(formatedCerts())">
        <div class="serie-header">
          <span>Series: {{key}}</span>
        </div>
        <table class="cert-table">
          <tr>
            <th>Element</th>
            <th>Value</th>
          </tr>
          <tr *ngFor="let certificate of formatedCerts()[key]">
            <td>{{certificate.ident}}</td>
            <td>{{certificate.moy_certifiee}}</td>
          </tr>
        </table>
      </li>
    </ul>

element.component.ts

import { Component, OnInit, Input, SimpleChange } from '@angular/core';

import { ElementFilter } from '../element-filter';
import { MrcCertService } from '../mrc-cert.service';
import { Element } from '../element';
import { IElement } from '../element.interface';
import { Certificate } from '../certificate';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
  selector: 'app-elements',
  templateUrl: './elements.component.html',
  styleUrls: ['./elements.component.css']
})

export class ElementsComponent implements OnInit {
  filters: ElementFilter[];
  elements: Element[];
  criteria: ElementFilter;
  certificates: Certificate[];

  constructor(private mrcService: MrcCertService) {
    this.filters = new Array<ElementFilter>();
    this.elements = new Array<Element>(); }

  ngOnInit() {
    this.mrcService.getElements()
      .subscribe(element => { element.forEach(item => {
          this.elements.push(new Element(item.Ident, item.Description));
        });
    });
  }

  objectKey(obj) {
    return Object.keys(obj);
  }

  formatedCerts() {
    return this.certificates.reduce(
      (prev, now) => {
        if (!prev[now.serie]) {
          prev[now.serie] = [];
        }
        prev[now.serie].push(now);
        return prev;
      }, {}
    );
  }

  /** some other functions ...*/
}

element.ts

export class Element {
    ident: string;
    description: string;

    constructor(ident: string, description: string) {
        this.ident = ident;
        this.description = description;
    }
}

certificate.ts

export class Certificate {
    serie: string;
    ident: string;
    moy_certifiee: string;
    seq: string;

    constructor(serie: string, ident: string, moy_certifiee: string, seq: string) {
        this.serie = serie;
        this.ident = ident;
        this.moy_certifiee = moy_certifiee;
        this.seq = seq;
    }
}

Требуется

Result(s): 3
--------------------
  Series: A
    Si: 1%
    Zr: 3%

  Series: B
    Ag: 3%
    Be: 6%

  Series: C
    Be: 3%
    Xe:4%

Мои попытки не увенчались успехом, поскольку это число находится за пределами моего * ngFor.Как я могу добиться этого с Angular 6?Поскольку я новичок в Angular, это вызов моему пониманию, и я не смог найти ответ в официальных документах или в Google.

Answer 1

Добавить resultCount: number; в класс ElementsComponent

Изменить метод objectKey на:

 objectKey(obj) {
var result = Object.keys(obj);
this.resultCount = result.length;
    return result;
  }  

Теперь вы можете использовать счетчик в любом месте HTML, используя {{resultsCount}}