Angular 基于 mat-select 更改的 span 中的动态标志图标

Question

我有一个 mat-select，我想 根据 select 在 mat-label 的范围内更改标志图标]ed选项。

显示初始标志，单击后跨度没有变化。

选项列表中的标志工作正常，所以问题只涉及标签。

我正在尝试类似的东西：

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}`;
    }

我也试过 getter/setter，但是 setter 在使用 mat-select.

时似乎不起作用

在此先感谢您的帮助！

Answer 1

我测试了它，你的代码有效。您应该只检查 2 个字母的国家/地区代码是否正确。

我不知道你是否只是没有正确复制它，但你在 HTML 中缺少关闭 <mat-form-field> 标记，所以也检查一下。

Working example

Answer 2

最终解决方案，基于 Nenad 的帮助：（选项前的标志，select输入上方没有标签）

<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>

Angular 基于 mat-select 更改的 span 中的动态标志图标

Angular dynamic flag icon in span based on mat-select change

javascript

angular-material

ngmodel

angular

mat-select