Angular 4/5 - 根据标题过滤下拉菜单

Question

在Angular中，我写了一个休息调用来获取以下数据（我将用json格式表示）：

第一个设备类型 json数据，用于下拉标题

{
    id: 1,
    description: "Head Protection"
},
{
    id: 2,
    description: "Hand Protection"
},
{...}, ...

其次设备 json数据，用于下拉值

{
    id: 1,
    equipmentTypeId: 1,
    equipmentTypeDescription: "Head Protection",
    description: "Climbers helmet"
},
{
    id: 2,
    equipmentTypeId: 2,
    equipmentTypeDescription: "Hand Protection",
    description: "Climbers gloves"
},
{...}, ...

以下是屏幕截图我想要做的事情（但已过滤）：

我有以下模型：

设备类型模型

export class EquipmentType implements BaseEntity {
    constructor(
        public id?: number,
        public description?: string,
        ...
    ) {
    }
}

设备型号

export class Equipment implements BaseEntity {
    constructor(
        public id?: number,
        public description?: string,
        public equipmentTypeId?: number,
        ...
    ) {}
}

在我的 component.ts 文件中，我有以下代码：

// class defined of course
// property declearations
equipment: Equipment[];
equipmentObj: Equipment;
equipmentType: EquipmentType[];

constructor(
    private equipmentService: EquipmentService,
    private equipmentTypeService: EquipmentTypeService
) {}

ngOnInit() {
    this.equipmentTypeService.query()
    .subscribe((res: ResponseWrapper) => {
        this.equipmentType = res.json;
        this.equipmentService.query()
        .subscribe((res: ResponseWrapper) => {
            this.equipment = res.json;
            for ( let x = 0; x < this.equipment.length; x++) {
                this.equipmentService.find(this.equipment[x].id).subscribe((equip) => {
                        this.filterProtection = this.equipment.filter((equipmentType) => {
                            equipmentType.equipmentTypeId === this.equipment[x].id
                            console.log(this.equipmentType);
                        });
                        console.log(this.filterProtection);
                });
            }
        }, (res: ResponseWrapper) => this.onError(res.json));
    }, (res: ResponseWrapper) => this.onError(res.json));
}

trackEquipmentById(index: number, item: Equipment) {
    return item.id;
}

trackEquipmentTypeById(index: number, item: EquipmentType) {
    return item.id;
}

我的HTML （component.html）包含以下代码：

<div *ngFor="let equipmentOption of equipmentType">
    <span>{{equipmentOption.description}}</span>
    <select class="form-control" id="field_issuedBy" name="issuedBy" [(ngModel)]="equipmentOption.id">
        <option [ngValue]="null"></option>
        <option [ngValue]="equipmentOpt.id" *ngFor="let equipmentOpt of equipment; trackBy: trackStatusById">{{equipmentOpt.description}}</option>
    </select>
</div>

现在定义了这个，我很难用设备过滤设备类型作为我的下拉值。

例如，如果用户选择头部保护下拉列表（来自设备类型），则只有设备 equipmentTypeId（s）应显示为值下拉。