角度：更改选择选项答案

【问题标题】：angular: change select options角度：更改选择选项
【发布时间】：2018-07-09 19:54:14
【问题描述】：

我有一个多选表单。

选择 1：校园
选择 2：建筑
选择 3：楼层
选择 4：房间

从“校园”中选择一个选项后，我希望更改建筑物列表（从数据库更新）。下游选择也是如此。

这是我目前所拥有的……我可以填充每个选择，但我不知道如何在原地动态更新它们。

form.component.html

<form [formGroup]="campusForm">
    <select id="campus" formControlName="campus" [ngModel]="null" (ngModelChange)="selectCampus($event)>
        <option [ngValue]="null" selected="selected">All Campuses</option>
        <option [ngValue]="campus" *ngFor="let campus of campuses"> {{campus.name}}</option>
    </select>

    <select id="building" formControlName="building" [ngModel]="null" (ngModelChange)="selectBuilding($event)>
        <option [ngValue]="null" selected="selected">All Buildings</option>
        <option [ngValue]="building" *ngFor="let building of buildings"> {{campus.name}}</option>
    </select>

    <!-- etc... -->
</form>

form.component.ts

ngOnInit() {
  this.loadCampuses();
  this.loadBuildings();
  //...
}

loadCampuses() {
  this.campusService.getCampuses().subscribe((res: Campus[]) => {
    this.campuses = res;
  });
}

selectCampuses(campus: Campus) {
  console.log (campus ? campus.name : "all campuses")
  this.loadBuildings(campus);
}

loadBuildings(campus: Campus) {
  this.buildingService.getBuildings(campus).subscribe((res: Building[]) => {
    this.buildings = res;
  });

  this.updateBuildingsSelect()
}

updateBuildingsSelect() {
  // This is where I'm stuck
}

【问题讨论】：

如果我没记错的话，你应该不需要做任何事情；下拉列表应根据this.buildings = res; 自行更新，这不是您所看到的吗？无论如何，您所做的任何事情都需要从该订阅功能启动。

标签： angular typescript

【解决方案1】：

只是不要[ngModel]="null"。就像那样，无论如何，您只是将其值设为空。而是用一些合理的值填充它。例如：

form.component.ts

selectedCampus: Campus = null;
selectedBuilding: Building = null;

selectCampus(campus: Campus) {
    this.selectedCampus = campus;
}

selectBuilding(building: Building) {
    this.selectedBuilding = building;
}

form.component.html

<select [ngModel]="selectedCampus">...</select>
<select [ngModel]="selectedBuilding">...</select>

【讨论】：