如何使用 JHipster 关系显示基于先前 select 的 select 的值？

Question

我想根据前一个 select 中的用户 select 显示第二个 select 的选项。

我有三个实体：Reservation、Building 和 Classroom。 There are relationships between them on image

所以我的目标是当我在 Reservation 实体 Building 中 select 时，我想在 Classroom select 中仅显示与 select编辑大楼。

例如，当我得到 Classroom id: 1 这个教室的 GET 时：

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

所以你可以看到它与 id:2 和编号：45 的建筑有关。

我在 JHipster/Angular 中的 HTML 在 Reservation 中显示那两个 select 是：

        <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，但不知道如何更改。现在 建筑物 select显示所有建筑物，教室 select显示所有教室。

非常感谢！

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>

如何使用 JHipster 关系显示基于先前 select 的 select 的值？

How to show values of a select based on previous select using JHipster relationships?

relationship

jhipster

angular