Angular2 中的反应式选择

Question

我正在尝试在一个表单中创建一组 select，该表单会根据用户正在 select 进行动态更改（用户必须在 selects 顺序）。

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

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

从我工作场所的 API 中获取地点（校园、建筑物、楼层和区域）的数据，这将给我一个 JSON。
做我正在做的事情，即根据用户 select 给他的某些选项。
然后用户可以将此表单（基本上是过滤器）发送到另一个 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 更改 detection.It 的问题在您更改它 (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");
    }

Angular2 中的反应式选择

Reactive selects in Angular2

javascript

typescript

angular

angular-forms