Значок углового динамического флага в диапазоне на основе изменения выбора мата

Question

У меня есть mat-select, и я хотел бы изменить значок флага в промежутке в mat-label в зависимости от выбранной опции.

Отображается начальный флаг, после щелчка в диапазоне не происходит никаких изменений.

Флаги в списке опций работают правильно, поэтому вопрос касается только метки.

Я пробую что-то вроде:

HTML:

          <mat-form-field>
    <mat-label>
      <span [class]="getLanguageFlag(selectedLanguage)"></span>
      {{ selectedLanguage }}
    </mat-label>

    <mat-select
      [(ngModel)]="selectedLanguage"
      name="selectedLanguage"
      id="selectedLanguage"
    >

      <mat-option
        *ngFor="let language of languages"
        [value]="language"
        (click)="changeLanguage(language)"
      >

        <span [class]="getLanguageFlag(language)"></span>
        {{ language }}
      </mat-option>
    </mat-select>
  </mat-form-field>

TS:

          selectedLanguage: string = environment.defaultLanguage;

    constructor(
    private store: Store<State>,
    private translateService: TranslateService) {}

    changeLanguage(language: string): void {
    this.selectedLanguage = language;
    }

    getLanguageFlag(language: string): string {
    let style = 'flag-icon flag-icon-';
    return language === 'en' ? `${style}gb` : `${style}${language}`;
    }

Я также пробовал геттер / сеттер, но сеттер, похоже, не работал при использовании mat-select.

Заранее спасибо за помощь!

Answer 1

Я протестировал его, и ваш код работает. Вам просто нужно проверить правильность двухбуквенного кода страны.

Я не знаю, правильно ли вы его скопировали, но вам не хватает закрытия <mat-form-field> тег в вашем HTML, так что проверьте и это.

Рабочий пример

Answer 2

Окончательное решение, основанное на помощи Nenad: (флаг перед опцией, без метки над полем выбора)

      <mat-form-field>
<span [class]="getLanguageFlag(selectedLanguage)"></span>
&nbsp;
<mat-select
  [(ngModel)]="selectedLanguage"
  name="selectedLanguage"
  id="selectedLanguage"
>
  <mat-option
    *ngFor="let language of languages"
    [value]="language"
    (click)="changeLanguage(language)"
  >
    <span [class]="getLanguageFlag(language)"></span>
    {{ language.toUpperCase() }}
  </mat-option>
</mat-select>
</mat-form-field>