Question

我有一个显示搜索结果的组件。它是一个表的列表，其中每个表是一系列化学分析中包含的元素的百分比（它具有唯一的ID）。我想在组件顶部显示系列数，即数组键中的元素数

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的新手，这对我的理解提出了挑战，我无法从官方文档或谷歌找到答案。

Answer 1

将resultCount: number;添加到ElementsComponent类

将objectKey方法修改为：

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

现在，您可以使用{{resultsCount}}

在html中的任意位置使用计数

显示ngFor * Angular 6生成的行数

1 个答案: