0

我有一个 mat-select ，我想根据所选选项更改 mat-label 跨度中的标志图标。

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

选项列表中的标志工作正常，所以问题只涉及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}`;
    }

我也尝试过 getter/setter，但在使用 mat-select 时，setter 似乎不起作用。

在此先感谢您的帮助！

4

2 回答 2

1

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

我不知道您是否没有正确复制它，但是您的<mat-form-field>HTML 中缺少结束标记，所以也要检查一下。

工作示例

于 2021-09-13T17:04:33.180 回答
0

最终解决方案，基于 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>
于 2021-09-13T20:29:28.570 回答