Блог

У меня есть компонент выбора ниже:

 <label>
{{ "HOME.SELECT" | translate }}
<select #langSelect (change)="translate.use(langSelect.value)" (change)='onOptionsSelected($event)'>
  <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="??">
    {{ lang }}</option>
 </select>
</label>
 

В конструкторе выбранный язык сохраняется в localstorage, как показано ниже:

 constructor(public translate: TranslateService) {
  translate.addLangs(["en-US", "fr-FR", "de-DE"]);
  if (localStorage.getItem('language')) {
  translate.setDefaultLang(localStorage.getItem('language'));
  translate.use(localStorage.getItem('language'));
} else {
  translate.setDefaultLang('en');
  translate.use('en');
  localStorage.setItem("language", "en");
}
}
 

Как я могу установить выбранный индекс на основе значения, хранящегося в localstorage?

 Add 'value' parameter to select and pass variable to it like below. Assign the value of variable to localstorage value. Assign the same variable to 'selected'.

Updated your code below:

<pre>
  <label>
    {{ "HOME.SELECT" | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)" (change)='onOptionsSelected($event)' value="localStorageValueVariable">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="localStorageValueVariable">
        {{ lang }}</option>
     </select>
    </label>
</pre>