在下拉菜单中保存最后选择的选项

Question

我是 angular 的新手，我正在尝试保存选择选项标签，但是语言已成功保存，即使我选择阿拉伯语，选择选项默认显示英语，当页面刷新时它会恢复为英语，如果您能帮助我实现这一目标，我将不胜感激

页脚.component.html

<div class="form-group">

   <select (change)="switchLanguage($event)" [ngModel]="lang" style="background-color: 

       #b3cee5;" class="form-control customized-dropdown alignleft">

       <option id="myLanguage" *ngFor="let item of Languages">{{item}}</option>

   </select>

</div>

页脚.component.ts

directionEn: any;

directionAr: any

language;

userLang;

localsettings: LocalSettingsService;

Languages : any = ['English', 'Arabic'];

lang;

constructor(private translate: TranslateService) {

  translate.setDefaultLang('en');

}

switchLanguage(event) {

if(event.target.value == 'English'){

  this.language = 'en'

  this.lang = event.target.value;

  this.ChangeToEnglish()

} else if(event.target.value == 'Arabic'){

  this.language = 'ar'

  this.lang = event.target.value;

  this.ChangeToArabic();

}

this.translate.use(this.language);

localStorage.setItem('lang', this.lang)

localStorage.setItem('language', this.language);

}

ChangeToEnglish(){

  document.querySelector('body')

  .setAttribute('style', 'direction: ltr; text-align: left; ');

}

ChangeToArabic(){

  document.querySelector('body')

   .setAttribute('style', 'direction: rtl; text-align: right;');

}

ngOnInit() {

  var language = localStorage.getItem('language')

  var lang = localStorage.getItem('lang')

if(language === 'ar' && lang === "Arabic"){

  this.translate.use('ar');

  this.ChangeToArabic();

}

else if(language === 'en' && lang === "English"){

  this.translate.use('en');

  this.ChangeToEnglish()

}

}

Answer 1

试试这个constructor(private translate: TranslateService) {&nbsp; translate.setDefaultLang(localStorage.getItem('language') ? localStorage.getItem('language') : 'en');}

Answer 2

我终于找到了解决方案，您只需为每个语句添加一个变量，如下所示：页脚.component.tsngOnInit() {&nbsp; var language = localStorage.getItem('language')&nbsp; var lang = localStorage.getItem('lang')if(language === 'ar' && lang === "Arabic"){&nbsp; this.translate.use('ar');&nbsp; this.ChangeToArabic();&nbsp; this.bind = "Arabic";}else if(language === 'en' && lang === "English"){&nbsp; this.translate.use('en');&nbsp; this.ChangeToEnglish()&nbsp; this.bind = "English";}页脚.component.html只需将 [(ngModel)]="bind" 添加到选择标签<select (change)="switchLanguage($event)" [(ngModel)]="bind"&nbsp; &nbsp; style="background-color: #b3cee5;" class="form-control>&nbsp; <option id="myLanguage" *ngFor="let item of Languages">{{item}}</option>&nbsp;</select>