Вот почему в вашем первом случае показываются все 3 * ngIf условные шаблоны, а затем почему переключение «исправляет»:
Ваш начальный код:
async ngOnInit() {
this._loading$ = this.loadingIndicationService.loading$.subscribe(
(loading) => {
console.log('loading subscribed in startscreen');
this.loading = loading;
}
);
this.selectedLanguage = await this.settingsService.getLanguage();
}
Ваш код инициализирован «selectedLanguage» со значением по умолчанию («de») изначально, и если не будет попытки чтения из хранилища через Promise - вы увидите только 2 из 3 шаблонов.
Проблема в том, что в приведенном выше коде selectedLanguage получает назначенное разрешение Promise после извлечения данных из хранилища.
И нерешенное ожидание Promise больше не равно значению строки de.
В вашем случае переключения вы используете переменную 'lang' и ждете разрешения Promise в фактическую строку, и только тогда вы присваиваете его свойству selectedLanguage, что предотвращает проблему, поскольку selectedLanguage остается как 'de', пока обещание не будет полностью разрешено.
Вот замечательный пример из MDN , демонстрирующий в вашей консоли, что начальное значение, которое получает переменная, является неразрешенным (в ожидании) Promise:
function resolveAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function f1() {
var x = await resolveAfter2Seconds(10);
console.log(x); // initially returns Promise pending, then 10
}
f1();
Просто вставьте это в консоль (devtools в Chrome), чтобы увидеть, что происходит.
Таким образом, ваш исходный код может быть в порядке, даже если вы назначите значение только после того, как оно разрешено таким образом. :
async ngOnInit() {
this._loading$ = this.loadingIndicationService.loading$.subscribe(
(loading) => {
console.log('loading subscribed in startscreen');
this.loading = loading;
}
);
this.settingsService.getLanguage().then(selectedLanguage => {
if (selectedLanguage) {
this.selectedLanguage = selectedLanguage;
}
})
}
ОБНОВЛЕНИЕ:
Я пытался воссоздать ваш вариант использования здесь: https://stackblitz.com/edit/ionic-angular-v5-ab6d6y
Мое подозрение, что в вашем коде может быть что-то еще, что мешает поведению, которое вы хотите. Не стесняйтесь играть.