Как показать значения выбора на основе предыдущего выбора, используя отношения JHipster?

Question

Я хочу показать опции второго выбора на основе выбора пользователя в предыдущем выборе.

У меня есть три объекта: Резервирование, Здание и Классная комната. Между ними есть отношения на изображении

Поэтому моя цель - когда я выбираю в Reservation сущность некоторую Building, я хочу показать в Classroom выбрать только классы, связанные с выбраннымиBuilding.

---

Когда я получу, например, Classroom id: 1, есть GET для этого класса:

{
  "id": 1,
  "number": "105",
  "building": {
    "id": 2,
    "number": "45",
    "reservations": null
  },
  "reservations": null
}

Так что, как вы можете видеть, это связано с Building с id: 2 и номером:45.

---

Мой HTML в JHipster / Angular для отображения этих двух селектов в Reservation:

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="srsApp.reservation.building"
            for="field_building">Building</label>
          <select class="form-control" id="field_building" name="building" formControlName="building"
            [(ngModel)]="building">
            <option [ngValue]="null"></option>
            <option
              [ngValue]="buildingOption.id === editForm.get('building').value?.id ? editForm.get('building').value : buildingOption"
              *ngFor="let buildingOption of buildings; trackBy: trackBuildingById">{{ buildingOption.number }}</option>
          </select>
        </div>


        <div class="form-group">
          <label class="form-control-label" jhiTranslate="srsApp.reservation.classRoom" for="field_classRoom">Class
            Room</label>
          <select class="form-control" id="field_classRoom" name="classRoom" formControlName="classRoom"
            [(ngModel)]="classroom">
            <option [ngValue]="null"></option>
            <option
              [ngValue]="classRoomOption.id === editForm.get('classRoom').value?.id ? editForm.get('classRoom').value : classRoomOption"
              *ngFor="let classRoomOption of classrooms; trackBy: trackClassRoomById">{{ classRoomOption.number }}
            </option>
          </select>
        </div>

Я думаю, что мне нужно как-то изменить *ngFor, но idkкак. Прямо сейчас Здание Выбор показывает все здания и Классная комната Выбор показывает все классные комнаты.

Большое спасибо!

Answer 1

После нашего обсуждения gitter:

1 / Сначала необходимо создать метод в ClassRoom.service.ts (при условии, что вы используете фильтрацию сущностей):

// in classRoom.service.ts

getClassRoomsByBuildingId(buildingId: number): Observable<EntityArrayResponseType> {
        return this.http.get<IClassRoom[]>(`${This is the link of filter}/${buildingId}`, { observe: 'response' });
    }

2 / Добавить этокод reservation-update.component.ts:

getClassRoomByBuildingId(buildingId: any) {
        this.classRoomService.getClassRoomByBuildingId(buildingId).subscribe(res => {
            this.filteredClassRooms = res.body;
        });
    }

и, наконец, reservation-update.component.html:

<div class="form-group">
          <label class="form-control-label" jhiTranslate="srsApp.reservation.building" for="field_building">Building</label>
          <select class="form-control" id="field_building" name="building" formControlName="building" (change)="getClassRoomByBuildingId(building.id)" [(ngModel)]="buildingId">
            <option [ngValue]="null"></option>
            <option
              [ngValue]="buildingOption.id === editForm.get('building').value?.id ? editForm.get('building').value : buildingOption"
              *ngFor="let buildingOption of buildings; trackBy: trackBuildingById"
              >{{ buildingOption.number }}</option
            >
          </select>
</div>
<div class="form-group">
          <label class="form-control-label" jhiTranslate="srsApp.reservation.classRoom" for="field_classRoom">Class Room</label>
          <select class="form-control" id="field_classRoom" name="classRoom" formControlName="classRoom" [(ngModel)]="classRoomId">
            <option [ngValue]="null"></option>
            <option [ngValue]="classRoom.id === editForm.get('classRoom').value?.id ? editForm.get('classRoom').value : classRoom" *ngFor="let classRoom of filteredClassRooms"
              >{{ classRoom.number }}
            </option>
   </select>
 </div>