angular 4 nested objects

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
  selector: 'my-app',
  template: `

  <div *ngFor='let test of tests' style='border: solid 1px'>
    <div *ngFor="let a of test.A.B">
      <div *ngFor="let b of a.C.D; let i = index"> <h4>Content {{i+1}}</h4>
        <b>Content: </b>{{b.content}}<br>
        <b>Date: </b>{{b.writedt | date}}<br>
        <b>Id: </b>{{b.writerid}}
        <hr>
      </div>
    </div>
  </div>
   
  `,
})
export class App {

public tests: any[] = [
 {
   'A': {
     'B': [{
       'C': {
         'D': [{
           'content': 'content_test1',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test1'
          }, {
           'content': 'content_test2',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test1'
          }, {
            'content': 'content_test3',
            'writedt': '2017-02-08 00:00:00',
            'writerid': 'writerid_test2'
         },  {
           'content': 'content_test4',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test2'
         }]
       }
     }]
   }
 }
];

}

@NgModule({
  imports: [ BrowserModule],
  declarations: [ App ],
  bootstrap: [ App ],
})
export class AppModule {}