Reactive selects in Angular2

Question

I'm trying to create a group of selects in a form, which changes dinamically depending on what the user is selecting (the user has to choose in the selects sequencially).

Problem is primarily in my onChange() function, because it doesn't seem to save the changes properly when the user selects a campus. If the user selected Campus1, the 'building' select should show only "2" as an option, whereas if the user selected Campus2, the 'building' select should show only "4" as an option.

Also, I don't know if my approach is quite correct, because I'm just fiddling by now but when this works I want the app to do the following:

1. Get data of places (campus, building, floor and zone) from an API we have at my workplace, which will give me a JSON.
2. Do what I'm doing, ie, depending on what the user selects give him certain options.
3. Then the user can send this form (which is basically filters) to another API and get the lockers information.

Any help with this? Especially the first part, but it would be great if you could also tell me if I'm on the right path to achieve what I want to do on the second part. I've read Angular documentation about reactive forms but I can't seem to get how to do it properly. Thanks in advance.

Here is my ts file:

    import {Component} from 'angular2/core';
    class Locker {
      constructor(public Campus: string, public Building: string, public Floor: string, public Zone: string, public Type: string) { }
    }

    @Component({
        selector: 'my-app',
        template: `
        <div class="column small-12 large-2">
        <label class="sbw_light">Campus</label><br />
        <select name="campus" [(ngModel)]="campus" (change)="onChange()">
            <option *ngFor="#each of lockers" [value]="each.Campus">
              {{each.Campus}}
            </option>
        </select>
        <br>
            <label class="sbw_light">Building</label><br />
        <select name="building" [(ngModel)]="building">
            <option *ngFor="#each of buildings">
            <div *ngIf="campus == 'Campus1'">
              {{each}}
              </div>
            </option>
        </select>
      </div>
        `
    })
    export class AppComponent {

      campus: String = "";
      building: String = "";
      floor: String = "";
      zone: String = "";
      type: String = "";

      lockers: Locker[] = [new Locker("Campus1", "2", "2", "B", "Simple"),
                           new Locker("Campus2", "1", "1", "C", "Simple"),
                           new Locker("Campus2", "1", "0", "A", "Simple")];

      buildings = [];
      floors: = [];
      zones: = [];
      types: = [];

      onChange(){
        console.log(campus);
        if (campus == 'Campus1'){
          this.buildings.length = 0;
          this.buildings.push("2");
        }
        else{
          this.buildings.length = 0;
          this.buildings.push("4");
        }
      }

    }

Answer 1

Problem with ngModel change detection.It's fires when you change it (onChange) , but value 'cumpus' don't updated. So you should use something like:

(onChange)="valueChanged($event)"

And in your component

 valueChanged(event: any) {
   const campus = event.target.value;
   console.log(campus);
    if (campus == 'Campus1'){
      this.buildings.length = 0;
      this.buildings.push("2");
    }
    else{
      this.buildings.length = 0;
      this.buildings.push("4");
    }