Как сделать, чтобы select отображал options в зависимости от выбранной option соседнего select'а?

Question

[Артур Загорский]

Вот структура:

<div class="filter">
			Filter by:
			<nb-select placeholder="Default" status="danger">
				<nb-option *ngFor="let criterion of filterConfig | keyvalue" [value]="criterion.key">{{criterion.key}}</nb-option>
			</nb-select>
			<nb-select placeholder="Default" status="danger">
				<nb-option *ngFor="let option of filterConfig | keyvalue" [value]="option.value">{{option.value}}</nb-option>
			</nb-select>
</div>

Ключи filterConfig -- элементы первого select'а, а значения -- второго.

filterConfig = {
		default: [...],
		contractStatus: [...],
		contractType: [...],
		userId: [...]
}

Comments

[origami1024]

а выделенное значение в первом nb-select как получить?

[Артур Загорский]

origami1024, меня, в первую очередь, интересует наличие возможности это сделать без написания дополнительного кода в классе всего компонента. Есть какой-нибудь способ?

[Артур Загорский]

origami1024, Допустим, там есть (click)="doSmth(criterion.key)"

[origami1024]

нужно этот criterion.key куда-то записать в state, чтобы при обновлении перерисовывалось само

<nb-option *ngFor="let option of filterConfig[criterion.key] | keyvalue" [value]="option.value">{{option.value}}</nb-option>

Answer 1

[Andrew]

<div class="filter">
      Filter by:
<div *ngFor="let criterion of filterConfig | keyvalue">
      <nb-select placeholder="Default" status="danger">
        <nb-option  [value]="criterion.key">{{criterion.key}}</nb-option>
      </nb-select>
      <nb-select placeholder="Default" status="danger">
        <nb-option [value]="criterion.value">{{criterion.value}}</nb-option>
      </nb-select>
</div>
</div>

Answer 2

[Антон Швец]

<select #optSelect (change)="kindSelect.kinds = filterConfig[optSelect.value]">
  <option *ngFor="let opt of filterConfig | keyvalue">{{opt.key}}</option>
</select>

<select #kindSelect>
  <option *ngFor="let kind of (kindSelect.kinds || filterConfig.fruit)">{{kind}}</option>
</select>

public filterConfig = {
  fruit: ['apple', 'orange', 'pineapple', 'grape'],
  vegetable: ['carrot', 'potato', 'dill', 'cucumber']
}

Промежуточная переменная kindSelect.kinds была введена из-за того, что если просто взять optSelect.value на начальной отрисовке шаблона value еще нет, optSelect.value появляется при первой детекции изменений, и в дев моде на втором проходе детекции обнаруживаются несоответствия значений с шаблоном, что вызовет ExpressionChangedAfterItHasBeenCheckedError.

Совет: не увлекаться таким шаманством, а сделать нормальную реактивную форму и подписку на нее.