правильный способ заполнить angular7 выбрать опции с удаленными данными?

Question

Я пытаюсь загрузить выбранные параметры асинхронно из удаленного источника (API календаря Google).

Я могу загрузить параметры удаленно из источника, не принадлежащего Google: stackblitz

Но когда я пытаюсь загрузить из Google API, он не отображает параметры, пока я не нажму на выпадающий список выбора ИЛИ не установлю значение (FormControl.setValue()) одним нажатием кнопки.

Почему?Единственный способ заставить его работать - это позвонить ChangeDetectorRef.detectChanges(); после вызова FormControl.setValue().

Здесь - это стек, который показывает проблему.

Несколькопримечания к нерабочему стеку:

1. Требуется, чтобы вы вошли в систему через Google и предоставили мой идентификатор клиента для чтения ваших календарей.Вы можете посмотреть на мой источник и увидеть, что я делаю что-то гнусное.Вы также можете отозвать доступ со своей страницы разрешений Google , мое приложение называется ShiftCals.
2. Откройте Console в stackblitz.Он сообщит вам, когда выбранные параметры (календари) были загружены из Google API.
3. Чтобы воспроизвести заново, нажмите кнопку «Войти в систему с помощью кнопки Google», а затем дождитесь появления окна выбора.Это будет пусто.Нажатие на select или нажатие set 1st option заставит выбор повторно выполнить рендеринг.
4. Чтобы повторно запустить тестовую итерацию, вам необходимо перезагрузить рамку предварительного просмотра stackblitz.

Myдогадка - проблема из-за какой-то проблемы со временем, однако я не могу понять это.Заранее спасибо за помощь.

Answer 1

Я понял это.

Ответ заключается в том, как Angular меняет обнаружение.В блоге Zones in Angular это объясняется лучше всего, но вкратце Angular полагается на изменения состояния (события, удаленные выборки и т. Д.), Чтобы инициировать обнаружение изменений.Эти изменения состояния отслеживаются только в том случае, если они происходят в угловой зоне.

Мой стек-блиц с проблемой выходит из зоны, поскольку некоторые из Google JS (gapi.load()) работают вiFrame - я думаю.В любом случае, это то место, где выполнение выходит из Зоны Angular.

Вот обновленный стек с реализацией, которая работает.

Что я здесь сделалэто обернуть gapi.load() в Promise, чей контекст находится в зоне.Кроме того, разрешение Promise s - это событие, которое запускает логику обнаружения изменений Angular.

Это было сложным для новичка Angular, такого как я, отследить, но я многому научился.Если эта тема вас интересует, это сообщение в блоге сделает еще один шаг вперед и поговорим о том, как улучшить качество рисования.