0

私の Ionic 5 プロジェクトでは、次の問題があります。キャストの問題があると思います。私の見解では、選択した言語のプロパティが言語自体と一致しない場合にのみ、言語フラグ アイコンを表示したいと考えています。問題は、アプリを初めて起動したときに、3 つのアイコンがすべて表示されることです。

私は次の見解を持っています：

<ion-toolbar color="secondary">
    <div class="flags">
      <ion-buttons slot="end" *ngIf="!loading">
        <ion-button *ngIf="selectedLanguage != 'de'" fill="clear" color="dark"
          class="ion-no-padding button-padding flag" (click)="changeLanguage('de')">
          <ion-icon src="../../../assets/flag-icons/de.svg"></ion-icon>
        </ion-button>
        <ion-button *ngIf="selectedLanguage != 'en'" fill="clear" color="dark"
          class="ion-no-padding button-padding flag" (click)="changeLanguage('en')">
          <ion-icon src="../../../assets/flag-icons/en.svg"></ion-icon>
        </ion-button>
        <ion-button *ngIf="selectedLanguage != 'nl'" fill="clear" color="dark"
          class="ion-no-padding button-padding flag" (click)="changeLanguage('nl')">
          <ion-icon src="../../../assets/flag-icons/nl.svg"></ion-icon>
        </ion-button>
      </ion-buttons>
    </div>
  </ion-toolbar>

設定サービスでは、次の関数を使用してローカル ストレージから言語文字列を取得します。

async getSetting(type: string) {
    let result;
    try {
      result = await this.storage.get('_setting_' + type);
    } catch (error) {
      console.warn(error);
    }
    return result;
  }

私の見解では、選択した言語を設定したいと思います:

export type AcceptedLanguage = 'de' | 'en' | 'nl';

私のページ コンポーネントでは、selectedLanguage を次のように宣言して初期化します。

selectedLanguage: AcceptedLanguage = 'de';

ngOnInit は次のように定義されます。

async ngOnInit() {
    this._loading$ = this.loadingIndicationService.loading$.subscribe(
      (loading) => {
        console.log('loading subscribed in startscreen');
        this.loading = loading;
      }
    );

    this.selectedLanguage = await this.settingsService.getLanguage();

  }

次のように言語の周りにスイッチケースを作成することで、すでに修正しました。

async ngOnInit() {
    this._loading$ = this.loadingIndicationService.loading$.subscribe(
      (loading) => {
        console.log('loading subscribed in startscreen');
        this.loading = loading;
      }
    );

    const lang = await this.settingsService.getLanguage();

    switch (lang) {
      case 'de':
        this.selectedLanguage = 'de';
        break;
      case 'en':
        this.selectedLanguage = 'en';
        break;
      case 'nl':
        this.selectedLanguage = 'nl';
        break;
      default:
        this.selectedLanguage = 'nl';
        break;
    }
  }

しかし、それは良い解決策ではありません！これに対する良い解決策は何ですか？そして、なぜこの問題が発生するのでしょうか? また、スイッチケースで問題が解決するのはなぜですか?

前もって感謝します！

4

1 に答える 1