Angular (HTTP)：两个选择字段应该互相更新，但只有一个会更新答案

【问题标题】：Angular (HTTP): Two select fields should update each other, but only one doesAngular (HTTP)：两个选择字段应该互相更新，但只有一个会更新
【发布时间】：2019-02-13 07:05:49
【问题描述】：

我的 HTML 视图中有两个选择输入字段。当我单击第一个时，将发生一个 JSON 请求，并会响应我一些我想稍后使用但已经用于下一个输入的 ID。第二个输入字段从第一个输入中获取选定的 ID 并启动另一个 API 请求。最后它将显示在let appointmentDate of appointmentDates 到目前为止一切顺利。

但有一件事并不令人满意。 当用户选择selectedAppointmentTypeId 但切换selectedAppointmentLocation 选择字段时，我的回复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>

这是我的组件.ts：

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

这是我的 API.service：

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

【问题讨论】：

如果可能，请考虑创建一个 StackBlitz。

标签： javascript node.js angular forms input

【解决方案1】：

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

onChangeLocation(LocationId) {
  console.log(LocationId);
  this.selectedAppointmentLocation = LocationId;
  // check if a value exists and use it
  if(this.selectedAppointmentTypeId) {
    this.onChangeTypeId(this.selectedAppointmentTypeId);
  }
}

由于您实际上并没有更改第二个选择值，因此在没有您特别请求的情况下，它不会重新运行您的更改功能。

【讨论】：