Угловой 4/5 - фильтрация выпадающих по заголовкам

Question

В Angular я написал вызов rest для получения следующих данных (я буду представлять их в формате 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) для раскрывающегося списка.