Javascript Angular（HTTP）：两个select字段应该相互更新，但只有一个字段可以更新

我的HTML视图中有两个选择输入字段。当我点击第一个时，一个JSON请求将发生，并将响应我一些ID，我想稍后使用，但已经用于下一个输入。第二个输入字段从第一个输入中获取所选ID并启动另一个API请求。最后，它将显示在

let appointmentDate of appointmentDates

中，目前为止一切正常

但有一件事并不令人满意当用户选择

selectedappointtypeid

但切换

selectedappointlocation

select字段时，我的回复

appointmentDates

不会得到更新

我怎样才能让他们一起工作

这是我的HTML视图：

<select 
  type="appointmentLocation" 
  [(ngModel)]="selectedAppointmentLocation" 
  (ngModelChange)="onChangeLocation($event)">
  <option 
    *ngFor="let appointmentLocation of appointmentLocations" 
    [ngValue]="appointmentLocation.id">
    {{appointmentLocation.name}}
  </option>
</select>
{{selectedAppointmentLocation}}

<select 
  type="appointmentType" 
  [(ngModel)]="selectedAppointmentTypeId" 
  (ngModelChange)="onChangeTypeId($event)">
  <option 
    *ngFor="let appointmentType of appointmentTypes | filter:false" 
    [ngValue]="appointmentType.id">
    {{appointmentType.name}}
  </option>
</select>
{{selectedAppointmentTypeId}}

<span 
  *ngFor="let appointmentDate of appointmentDates">
  {{appointmentDate.date}}
</span>

---

如果已经选择了某些内容，请尝试强制重新运行第二个选择：

onChangeLocation（LocationId）{
console.log（LocationId）；
this.selectedAppointLocation=LocationId；
//检查值是否存在并使用它
if（此.selectedAppointTypeId）{
this.onChangeTypeId（this.selectedAppointTypeId）；
}
}

---

因为你实际上没有改变第二个选择值，它不会重新运行你的更改函数，除非你特别要求它。

private appointmentLocations: Array < object > = [];
private appointmentTypes: Array < object > = [];
private appointmentDates: Array < object > = [];
selectedAppointmentTypeId: string;
selectedAppointmentLocation: string;

ngOnInit() {
  this.getData();
}

onChangeLocation(LocationId) {
  console.log(LocationId);
  this.selectedAppointmentLocation = LocationId;
}

onChangeTypeId(TypeId) {
  console.log(TypeId);
  this.selectedAppointmentTypeId = TypeId;
  this.apiService
    .getAppointmentDatesById(
      this.selectedAppointmentTypeId,
      this.selectedAppointmentLocation
    )
    .subscribe((data: Array < object > ) => {
      this.appointmentDates = data;
      console.log(data);
    });
}

public getData() {
  this.apiService
    .getAppointmentLocations()
    .subscribe((data: Array < object > ) => {
      this.appointmentLocations = data;
      console.log(data);
    });
  this.apiService.getAppointmentTypes().subscribe((data: Array < object > ) => {
    this.appointmentTypes = data;
    console.log(data);
  });
}

getAppointmentDatesById(
  selectedAppointmentTypeId,
  selectedAppointmentLocation
) {
  return this.httpClient.get(
    `${this.API_URL}/availability/dates/${selectedAppointmentTypeId}/2018-09/${selectedAppointmentLocation}`
  );
}