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

Вот структура:
<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: [...]
}
  • Вопрос задан
  • 217 просмотров
Пригласить эксперта
Ответы на вопрос 2
KickeRocK
@KickeRocK
FrontFinish
<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>
Ответ написан
Комментировать
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
<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.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы