Question

我正在尝试在表单中创建一组选择，这些选择会根据用户选择的内容进行改变（用户必须在顺序选择中进行选择）。

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

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

从我们工作场所的API获取地点（校园，建筑物，楼层和区域）的数据，这将为我提供JSON。
做我正在做的事情，即根据用户选择的内容给他一些选择。
然后用户可以将此表单（基本上是过滤器）发送到另一个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），但值＆＃39; cumpus＆＃39;没有更新。所以你应该使用类似的东西：

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

在Angular2中选择Reactive

1 个答案: