Javascript 反应式角度选择2

我试图在表单中创建一组选择项，这些选择项会根据用户选择的内容进行动态更改（用户必须依次在选择项中进行选择）

问题主要出在我的onChange（）函数中，因为当用户选择校园时，它似乎无法正确保存更改。如果用户选择Campus1，“building”选项应仅显示“2”作为选项，而如果用户选择Campus2，“building”选项应仅显示“4”作为选项

此外，我不知道我的方法是否完全正确，因为我现在只是在摆弄，但当这一切起作用时，我希望应用程序能做到以下几点：

从我工作场所的API中获取场所（校园、大楼、楼层和区域）的数据，这将给我一个JSON

做我正在做的事情，也就是说，根据用户的选择，给他一些选择

然后用户可以将此表单（基本上是过滤器）发送到另一个API并获取储物柜信息 有什么帮助吗？特别是第一部分，但如果你也能告诉我，我是否走上了正确的道路，实现了我想在第二部分做的事情，那就太好了。我读过关于反应式表单的有角度的文档，但我似乎不知道如何正确地完成它。提前谢谢

这是我的ts文件：

    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");
        }
      }

    }

从'angular2/core'导入{Component}；
班级更衣室{
构造函数（公共校园：字符串，公共建筑：字符串，公共楼层：字符串，公共区域：字符串，公共类型：字符串）{}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
校园

{{每个校园}


建筑

{{each}}
`
})
导出类AppComponent{
校园：String=“”；
建筑物：String=“”；
地板：String=“”；
区域：字符串=”；
类型：String=“”；
储物柜：储物柜[]=[新储物柜（“Campus1”、“2”、“2”、“B”、“简单”），
新储物柜（“Campus2”、“1”、“1”、“C”、“简单”），
新储物柜（“Campus2”、“1”、“0”、“A”、“简单”）；
建筑物=[]；
楼层：=[]；
分区：=[]；
类型：=[]；
onChange（）{
console.log（校园）；
如果（校园==“校园1”）{
此.buildings.length=0；
本。建筑物。推送（“2”）；
}
否则{
此.buildings.length=0；
本。建筑物。推送（“4”）；
}
}
}

ngModel更改检测有问题。当您更改它时（onChange），它会触发，但值“cumpus”不会更新。因此，您应该使用以下内容：

(onChange)="valueChanged($event)"

在你的组件中

 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");
    }

---

谢谢，它工作得很好。我只是想指出，console.log不是必需的，但可以用于调试，以防有人看到这个答案。