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