时间戳

首页 > 解决方案 > 如何使用 JHipster 关系显示基于先前选择的选择值？

angular - 如何使用 JHipster 关系显示基于先前选择的选择值？

问题描述

我想根据上一次选择中的用户选择显示第二次选择的选项。

我有三个实体：预订、建筑和教室。 图像上有它们之间的关系

所以我的目标是当我在Reservation实体中选择一些时Building，我只想在Classroom与所选建筑物相关的教室中显示。

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

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

如您所见，它与 ID：2 和编号：45 的 Building 有关。

我在 JHipster/Angular 中用于显示这两个选择的 HTMLReservation是：

        <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某种方式改变，但我知道如何。现在 Building select 显示所有建筑物，Classroom select 显示所有教室。

非常感谢！

标签： angularrelationshipjhipster

解决方案

在我们对 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>

推荐阅读