Angular 6 ng对于按键分组的表列表 [英] Angular 6 ngFor list of tables grouped by key

问题描述

我的Angular 6应用程序需要显示一个表格列表，其中表格是对其组成元素进行的一组化学分析.

My Angular 6 app needs to displays a list of tables, where a table is a group of chemical analyses of elements of its composition.

假设我有金属合金 A .我对其进行了不同的化合物分析，以找到其化学成分:铁:0.001％，铜:0.042％，等等.

Lets say I have a metal alloy A. I perform different compound analyses on it to find its chemical composition: Fe: 0.001%, Cu: 0.042%, etc.

这是我的数据源，它只是带有模拟的打字稿文件

Here is my data source, which is only a typescript file with mocks

import { Certificate } from './certificate';

export const CERTIFICATES: Certificate[] = [
    { serie: '1050 AJ', ident: 'Fe', moy_certified: 0.297 },
    { serie: '1050 AJ', ident: 'Cu', moy_certified: 0.04 },
    { serie: '1050 AJ', ident: 'Mn', moy_certified: 0.0374 }, 
    { serie: 'X332.0 AC', ident: 'V', moy_certified: 0.019 },
    { serie: 'X4002 AA', ident: 'Mn', moy_certified: 0.037 }
];

我想在使用Angular 6的HTML中在表列表中显示此数据，其中一系列的每个分析都按如下方式分组:

I would like to display this data, in HTML using Angular 6, in a list of tables, where each analyses of a series are grouped like this:

Serie: 1050 AJ
-------------------------
| Element | Composition |
-------------------------
|    Fe   |    0.0297   |
-------------------------
|    Cu   |    0.04     |
-------------------------
|    Mn   |    0.0374   |

Serie: X332.0 AC
-------------------------
| Element | Composition |
-------------------------
|    V    |    0.019    |

Serie: X332.0 AC
-------------------------
| Element | Composition |
-------------------------
|    Mn   |    0.037    |

我的HTML文件现在看起来像这样

My HTML file for now looks like this

<ul class="cert-result">
    <li *ngFor="let certificate of certificates">
      <table>
        <tr>
          <th>Serie</th>
          <th>Element</th>
          <th>Composition</th>
        </tr>
        <tr>
          <td>{{certificate.serie}}</td>
          <td>{{certificate.ident}}</td>
          <td>{{certificate.moy_certifiee}}</td>
        </tr>
      </table>
    </li>
  </ul>

显然，这不是正确的方法，因为它为我的数据源的每个元素创建了一个表.

And obviously, this isn't the right way to do it since it makes a table for each elements of my data source.

推荐答案

您必须更改数据结构.

解决方案.

您的数据

export const CERTIFICATES: Certificate[] = [
    { serie: '1050 AJ', ident: 'Fe', moy_certified: 0.297 },
    { serie: '1050 AJ', ident: 'Cu', moy_certified: 0.04 },
    { serie: '1050 AJ', ident: 'Mn', moy_certified: 0.0374 }, 
    { serie: 'X332.0 AC', ident: 'V', moy_certified: 0.019 },
    { serie: 'X4002 AA', ident: 'Mn', moy_certified: 0.037 }
];

在您的组件中创建一个方法.假设formatedData()

Create a method in your component. let say formatedData()

import { CERTIFICATES } from './certificate';


class AppComponent {
  //Todo...

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

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

        prev[now.serie].push(now);
        return prev;
      }, {});

    /*
       Now your data : { "1050 AJ": [ .... ], "X332.0 AC": [...], ... }
    */

  }

}

现在在模板中:

    <ul class="cert-result">
      <li *ngFor="let key of objectKey(formatedCerts())">
        <span>{{key}}</span>
        <table>
          <tr>
            <th>Élément</th>
            <th>Moy. Certifiée</th>
          </tr>
          <tr *ngFor="let certificate of formatedCerts()[key]">
            <td>{{certificate.ident}}</td>
            <td>{{certificate.moy_certifiee}}</td>
          </tr>
    </table>
      </li>
    </ul>

如果要优化，请将formatedCerts()的数据存储到变量中.

If you want to optimize, store the data of formatedCerts() into a variable.

这篇关于Angular 6 ng对于按键分组的表列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！