javascript - Angular2 中的响应式(Reactive)选择

Question

我正在尝试在表单中创建一组选择，这些选择会根据用户选择的内容动态变化(用户必须在选择中按顺序进行选择)。

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

另外，我不知道我的方法是否完全正确，因为我现在只是在摆弄，但当它起作用时，我希望应用程序执行以下操作:

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

对此有什么帮助吗？尤其是第一部分，但如果您也能告诉我我是否走在实现第二部分目标的正确道路上，那就太好了。我已经阅读了有关响应式(Reactive)表单的 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");
    }