Angular 6 ng для списка таблиц, сгруппированных по ключу - PullRequest
Новая
       23

Angular 6 ng для списка таблиц, сгруппированных по ключу

0 голосов
/ 17 мая 2018

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

Допустим, у меня есть металлический сплав A . Я выполняю различные анализы соединений, чтобы определить его химический состав: Fe: 0,001%, Cu: 0,042% и т. Д.

Вот мой источник данных, который представляет собой только машинописный файл с макетами 

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

Я хотел бы отобразить эти данные в формате HTML с использованием Angular 6 в списке таблиц, где каждый анализ серии сгруппирован следующим образом: 

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-файл сейчас выглядит следующим образом 

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

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

Ответы [ 3 ]

0 голосов
/ 17 мая 2018 
  <table >
    <tr>
      <th>Serie</th>
      <th>Element</th>
      <th>Composition</th>
    </tr>
    <ng-container *ngFor="let certificate of certs">
    <tr *ngIf="certificate.serie == '1050 AJ'">
      <td>{{certificate.serie}}</td>
      <td>{{certificate.ident}}</td>
      <td>{{certificate.moy_certified}}</td>
    </tr>
    <tr *ngIf="certificate.serie == 'X332.0 AC'">
      <td>{{certificate.serie}}</td>
      <td>{{certificate.ident}}</td>
      <td>{{certificate.moy_certified}}</td>
    </tr>
    <tr *ngIf="certificate.serie == 'X4002 AA'">
      <td>{{certificate.serie}}</td>
      <td>{{certificate.ident}}</td>
      <td>{{certificate.moy_certified}}</td>
    </tr>
    </ng-container>
</table>

Демо: https://stackblitz.com/edit/angular-3tvwgv

Не очень лаконично. Надеюсь, другие могут дать лучшее решение.

0 голосов
/ 17 мая 2018

Вы можете легко заархивировать это, используя подчеркивание в вашем угловом приложении.

как использовать библиотеку underscore.js в угловых 2 

    groupedSeriesNames = []
        groupedSeries = []
            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 }
            ];

this.groupedSeries = _.groupBy(this.Certificate, certificate=>certificate.serie);

    this.groupedSeriesNames = Object.keys(this.groupedSeries)

Certificate.serie станет их ключом, вы можете изменить Certificate.serie на любое другое свойство, например, Iden или все, что вам нужно

Ваш HTML 

<ul class="cert-result">
    <li *ngFor="let key of groupedSeriesNames">
      <table *ngFor="let certificate of groupedSeries[key]">
        <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>
0 голосов
/ 17 мая 2018

Вы должны изменить структуру данных.

Решение.

ваши данные 

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()

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() в переменную.

...