У меня есть раскрывающийся список, который изначально содержит один элемент.
<select (click)="loadStuff()">
<option value="DEFAULT_ELEMENT">DEFAULT</option>
<option *ngFor="let e of elements" [ngValue]="e">{{ e }}</option>
</select>
В раскрывающемся списке есть событие click, которое загружает раскрывающиеся элементы, если они еще не загружены:
public elements = [];
loadStuff() {
if (!this.elements.length) {
setTimeout(() => {
for (let i=0; i < 10; i++) {
this.elements.push('element ' + i)
}
}, 1000)
}
}
Теперь моя проблема: когда я нажимаю на раскрывающийся список, он изначально имеет один элемент, как и ожидалось:
Но после загрузки элементов (в то время как раскрывающийся список все еще открыт) он добавляет полосу прокрутки к элементам:
Затем мне нужно щелкнуть и вернуться, чтобы список отображался правильно :
Вот рабочая версия Angular для демонстрации проблемы: https://stackblitz.com/edit/angular-ivy-pgyd1q
Также такое же поведение с использованием jQuery: http://jsfiddle.net/6j7a3sxn/
Как я могу предотвратить это?