时间戳

首页 > 解决方案 > 如何从本地存储中获取设置选择值？

angular - 如何从本地存储中获取设置选择值？

问题描述

我有以下选择组件：

<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");
}
}

如何根据存储在本地存储中的值设置选定的索引？

标签： angulartypescriptlocal-storage

解决方案

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>

推荐阅读