Q:

Need help passing user input data to dynamically alter forms

Angular Issue: I'm trying to get the value of a user's dropdown selection in order to populate the next dropdown dynamically and show them only the options that should be returned based on their original selection.  I've got a function which takes the value of the $event, hits my JSON file and then returns the proper strings to populate the next dropdown, but the only thing that shows up is an empty dropdown.    
I've thrown dummy html to test the NgIf and know its working as well as the values returning from my function as they've logged to the console.  Really at a loss here as unless theres something I don't know about angular behind the scenes I should just be able to plug the values from my function to an NgFor and throw up newly created options for the second dropdown 
post.component.ts:
export class PostComponent implements OnInit {
  rForm: FormGroup;
  title: String;
  description: String;
  category: String;
  subCategory: String;
  item: String;
  deathDate: Date;
  claimedBy: String;
  specifics: String;
  selections = postOptions;
  currentOptions: String[]
  showSecond: boolean = false
  showThird:boolean= false
  currentName:String

  toggleCategory(event) {

    this.showSecond = true
    let selectedTitle = (event.target.value);
    this.currentName = event.target.getAttribute('name')
    this.currentOptions = this.displaySubcategory(selectedTitle, 
    this.currentName);

  }

  displaySubcategory(str: any, dataToDisplay: String) {
      let childData = {
        index: 0,
        options: [],
      };

      for (let i = 0; i <= this.selections.length; i++) {
        if (str === this.selections[i].department) {
          childData.index = i;
          for 
            (let j = 0; j < this.selections[i].children.length; j++) 
             {
              childData.options.push
              (this.selections[i][`${dataToDisplay}`][j].title)
             }
        }
     return childData.options;
   }
}

post.component.html:
  <div class="panel-body">
    <div class="dropdown">
      <select class="form-control" id="category" 
      (change)="toggleCategory($event)" 
      [(ngModel)]="this.category" name="children">

        <option>scenery</option>
        <option>electrical</option>
        <option>material</option>
        <option>etc</option>

      </select>
    </div>

    <div *ngIf="this.showSecond">
      <div class="dropdown">
        <select class="form-control" id="category 
         (change)="toggleCategory($event)" 
         [(ngModel)]="currentOptions" name="item">
          <div *ngFor="let item of items">
            <option>{{item}}</option>
          </div>
        </select>
      </div>
    </div>

The expected results are being logged to the console and stored as this.currentOptions, the NgIf conditional fires and the next dropdown renders but then nothing seems to get passed to the dropdown.  Do i need to set up something asynchronously?  Does NgFor fire on the event or when the DOM renders?

A:

Don't wrap your <option> in a div. It should be a <ng-container>
    <select class="form-control" id="category 
     (change)="toggleCategory($event)" 
     [(ngModel)]="currentOptions" name="item">
      <ng-container *ngFor="let item of items">
        <option>{{item}}</option>
      </ng-container>
    </select>

