title: How to generate table with nested Array objects without Nested Table and keeping columns aligned in Angular 2?
body: <p>I'm trying to generate a table with nested Array object, apart from using nested table, which can't proper align the header in the outer table with the column in inner table.</p>
  
  <p>example class:</p>
  
  <pre><code> export class Result{
      id?: string;
      result?: string;
   }
  
   export class Entity{
      result?: Array&lt;Result&gt;;
      name?: string;
   }
  
   export class Test{
      entity?: Array&lt;Entity&gt;;
   }
  </code></pre>
  
  <p>data:</p>
  
  <pre><code>{
     "test":{
        "entity":[
           {
              "name":"ABC",
              "result":[
                 {
                    "id":"123",
                    "result":"AAA"
                 },
                 {
                    "id":"456",
                    "result":"SSS"
                 }
              ]
           },
           {
              "name":"CDE",
              "result":[
                 {
                    "id":"789",
                    "result":"BBB"
                 },
                 {
                    "id":"012",
                    "result":"CCC"
                 }
              ]
           }
        ]
     }
  }
  </code></pre>
  
  <p>Expected table structure:
  <a href="https://i.stack.imgur.com/7vgSf.jpg" rel="nofollow noreferrer">Expected table structure</a></p>
  
  <p>In the html template, how do I generate rows in the inner loop of the "test.result" object? Or is there a better way to do this?</p>
  
  <pre><code>&lt;tr *ngFor="let test of test.entity; let i=index;"&gt;
                      &lt;td&gt;{{test.name}}&lt;/td&gt;
                      &lt;ng-container *ngFor="let result of test.reslt; let j=index;"&gt; // how to generate more row here?
                              &lt;td style="width: 19%; text-align:center;"&gt;{{result.id}}&lt;/td&gt;
                              &lt;td style="width: 19%; text-align:center;"&gt;{{result.name}}&lt;/td&gt;
                      &lt;/ng-container&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Thanks for your help in advance.</p>