<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.
Совет: не увлекаться таким шаманством, а сделать нормальную реактивную форму и подписку на нее.