Angular 2 dynamic matrix table

Question

How can I create a dynamic matrix table in Angular 2?

The matrix should look like this:

    Test1   Test2   Test3
 A  1,5     1,8     1,6
 B  1,8     1,6     1,9
 C  1,6     1,6     1,8

This is just an example data. The size of the json is dynamically. I can have more tests than 3. my Json:

data = [{
 "test": "Test1",
  results: [{
    "env": "A",
    "result": 1,5
  }, {
    "env": "B",
    "result": 1,8
  }, {
    "env": "C",
    "result": 1,6
  }]
}, {
  "test": "Test2",
  results: [{
    "env": "A",
    "result": 1,5
  }, {
    "env": "B",
    "result": 1,7
  }, {
    "env": "C",
    "result": 1,6
  }]
}, {
  "test": "Test3",
  results: [{
    "env": "A",
    "result": 1,8
  }, {
    "env": "B",
    "result": 1,6
  }, {
    "env": "C",
    "result": 1,6
  }]
}];

thanks in advance

You can populate a HTML table using *ngFor with your data array — Anuradha Gunasekara, Apr 23 '18 at 06:32
who send you the json as you show is your worst enemy. You must transform your json in an array of array using for..in (see https://stackoverflow.com/questions/16174182/typescript-looping-through-a-dictionary) and then use two *ngFor — Eliseo, Apr 23 '18 at 07:37
I can change the json format. Normally I have an array: [{test,env, result}, {test1,env1, result1}]. How the array has to look like in my case? — trap, Apr 23 '18 at 08:57

score 0 · Answer 1 · answered Apr 23 '18 at 07:59

Possible solution might be two embeded *ngFor-s:

<div *ngFor="let row of data">
  <span *ngFor="let column of row.results>
    {{column.result}}
  </span>
</div>

Also, please read about this site's guide about how to ask good questions sou you will get more answers.

Angular 2 dynamic matrix table

1 Answers1