Angular2中的反应式选择

Question

我正在尝试以表单的形式创建一组选择项，该选择项会根据用户选择的内容而变化（用户必须依次选择这些选择项）。

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

另外，我不知道我的方法是否正确，因为我现在只是摆弄东西，但是当这可行时，我希望应用程序执行以下操作：

1. 从我在工作场所使用的API获取位置（校园，建筑物，楼层和区域）的数据，这将为我提供JSON。
2. 做我正在做的事情，即根据用户的选择为他提供某些选择。
3. 然后，用户可以将此表单（基本上是过滤器）发送到另一个API，并获取储物柜信息。

有什么帮助吗？ 尤其是第一部分，但是如果您也能告诉我我是否在正确的道路上实现我想在第二部分中做的事情，那将是很棒的。 我已经阅读了有关反应式表单的Angular文档，但似乎无法正确地做到这一点。 提前致谢。

这是我的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");
        }
      }

    }

Answer 1

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