Как сделать фильтр на основе другого выбора?

Question

[CrimsonFox]

Столкнулся с задачей, которую никак не могу решить хотя на первый взгляд кажется простой.
Есть два выпадающих списка, которые получают id двух других таблиц, внешне выбор основан на третьей связаной таблице
требуется сделать так, чтобы после выбора в первом ng-select, во втором появлялись только те значения, для которых server.dns_name одинаковый
то есть при выборе serv_id из выпадающего списка, в списке разделов сервера должны остаться только те значения для выбора, для которых связанное поле server.dns_name = аналогичному связанному с сервисом
вопрос в том, как это прописать?

<div class="dropdown">
    <label>Cервис</label>
    <ng-select  [items]="services"
                placeholder="ДНС имя сервера + Базовая технология"
                bindValue="id"
                [searchFn]="searchService"
                [(ngModel)]="service_data.serv_id" required>
                <ng-template ng-label-tmp let-item="item">
                  <span >{{item?.server?.dns_name  + ' + ' + item?.server_description }}</span>
                </ng-template>
                <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
                  <span >{{ item?.server?.dns_name + ' + ' + item?.server_description }}</span>
                </ng-template> 
    </ng-select>
  </div>
<div class="dropdown">
    <label>Раздел сервера</label>
    <ng-select  [items]="server_partitions"
                placeholder="ДНС имя и точка доступа сервера"
                bindValue="id"
                [searchFn]="searchServer"
                [(ngModel)]="service_data.server_partition_id"
                
                [disabled]=" !submitted && !service_data.serv_id">
                <ng-template ng-label-tmp let-item="item">
                  <span >{{ item?.server?.dns_name + ' + ' + item?.server_mount_point }}</span>
                </ng-template>
                  <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
                    <span >{{ item?.server?.dns_name + ' + ' + item?.server_mount_point  }}</span>
                  </ng-template>
    </ng-select>
  </div>

Comments

[MoralGray]

Смутно понимаю описание проблемы. Если актуально, сделай песочницу с данными.

Answer 1

[Антон Швец]

Реактивные формы сделайте.

fb.group({
  servId: '',
  partitionId: '',
})

Тогда

filtered_server_partitions = this.fb.controls.servId.valueChanges.pipe(
  map(servId => this.server_partitions.filter(p => p.servId = servId))
)