title: using *ngfor for options in select element using nested json
body: <p>I don't know how to display a collection of data within an element in Angular 2.</p>
  
  <p><strong>json</strong></p>
  
  <pre><code>[
    {
      "DropdownValues": [
        {
          "ID": 1,
          "Value": "January"
        },
        {
          "ID": 2,
          "Value": "February"
        },
        {
          "ID": 3,
          "Value": "March"
        }
      ],
      "DropDownID": 1,
      "DropDownTitle": "Month",
      "IsMonth": true,
      "IsYear": false,
      "IsCompay": false,
      "IsCompanyName": false
    }
  
  ]
  </code></pre>
  
  <p>I was able to load it into an interface when calling my service</p>
  
  <pre><code>export interface ITabControls {
  
   DropdownValues: {
                      DropDownID: number;
                      DropDownMappingID: number;
                      Value: string;
              }
              DropDownID: number;
              DropDownTitle: string;
              IsMonth: boolean;
              IsYear: boolean;
              IsCompay: boolean;
              IsCompanyName: boolean;
  
          }
  </code></pre>
  
  <p><strong>tab.component.ts</strong></p>
  
  <pre><code>@Component({
      selector: 'tab',
      moduleId: module.id,
      templateUrl: 'tab.component.html'
  
  
  })
  export class TabComponent implements OnInit {
  
      tabControls: ITabControls[];
  
      constructor(private _appParams: AppParamasService, private _tabService: TabService) {
     this._appParams.linkNameValue.subscribe(linkName =&gt; {this.linkName = linkName;});
  
  
      }
  
      ngOnInit(): void {
  
          this._tabService.GetControls(1)
              .subscribe(
              data =&gt; {
                  this.tabControls = data;
              },
              error =&gt; this.errorMessage = &lt;any&gt;error);
          console.log('tab Service  ' + this.tabControls);
  
  
  
      }
  
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="row  left" *ngFor='let control of tabControls'&gt;
      &lt;div class="col-md-3 text-left" style="border:1px dotted"&gt;
          {{control.DropDownTitle}}
      &lt;/div&gt;
      &lt;div class="col-md-9 text-left"&gt;
          &lt;select&gt;
              &lt;option *ngFor='let controlList control.DropdownValues' [value]="controlList.ID"&gt;
                  {{controlList.Value}}
              &lt;/option&gt;
          &lt;/select&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;   
  </code></pre>
  
  <p>I get an error</p>
  
  <blockquote>
    <p>Parser Error: Unexpected token . at column 24 in [let controlList
    control.DropdownValues] in TabComponent@23:44 ("ext-left"></p>
  </blockquote>