离子选择选项的离子改变语言答案

【问题标题】：Ionic change language with ion-select-option离子选择选项的离子改变语言
【发布时间】：2020-12-02 13:53:03
【问题描述】：

我使用 ion-select-option 实现语言切换来传递值和更改语言文件这是html代码

  <ion-item>
    <ion-label>Language </ion-label>
    <ion-select placeholder="Select One" [(ngModel)]="lang" (ionChange)="switchLanguage()" interface="action-sheet">
      <ion-select-option value="ar" selected="true">Arabic</ion-select-option>
      <ion-select-option value="en">English</ion-select-option>
    </ion-select>
  </ion-item>

还有 ts 代码

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { TranslateService } from '@ngx-translate/core';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  lang: any;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    public translate: TranslateService
  ) {
    this.initializeApp();
    this.lang = 'ar';
    this.translate.setDefaultLang('ar');
    this.translate.use('ar');
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.splashScreen.hide();
    });
  }

  switchLanguage() {
    this.translate.use(this.lang);
    console.log(this.lang);
  }



}

控制台总是返回“ar” 知道问题出在哪里吗？

【问题讨论】：

您可能希望删除第一个 option 标记的 selected 属性，因为您的模型已初始化为此值。
@Nicolas 还是一样
您可以创建一个minimal reproducible example 来帮助我们了解您的问题吗？
@Nicolas 我对帖子进行了编辑并附上了完整的 app.component.ts 文件
我尝试在stackblitz 上重现您的问题，但我做不到。也许您可以以此为例，尝试解决您的问题。

标签： angular ionic-framework

【解决方案1】：

我通过用事件替换 this.lang 解决了这个问题

switchLanguage($event) {
    this.translate.use($event.target.value);
    console.log($event.target.value);
  }

html

      <ion-item>
        <ion-label>Language </ion-label>
        <ion-select placeholder="Select One" [(ngModel)]="lang" (ionChange)="switchLanguage($event)" interface="action-sheet">
          <ion-select-option value="ar">Arabic</ion-select-option>
          <ion-select-option value="en">English</ion-select-option>
        </ion-select>
      </ion-item>

【讨论】：

【解决方案2】：

 <ion-select placeholder="Select Language" 
    [(ngModel)]="loginCredentials.language"
    (ngModelChange)="changeLanguage(loginCredentials.language)">
    <ion-select-option value="0">Select Language</ion-select-option> 
    
    <ion-select-option value="ar">Arabic</ion-select-option>
    
                         <ion-select-option value="en">English</ion-select-option>
                     
    
     </ion-select>
    
    
    
    
    
    
    
    
    
    
    
    
    changeLanguage(language) {
    
        this.translate.setDefaultLang(language)
     
        }

【讨论】：