在 Mat-Select 中隐藏选定的选项答案

【问题标题】：Hide selected option in Mat-Select在 Mat-Select 中隐藏选定的选项
【发布时间】：2021-12-01 23:27:23
【问题描述】：

我想知道是否可以在选择的角度材料 2 中隐藏所选选项。所以我现在有这个：

<mat-form-field>
    <mat-select placeholder="{{ 'NAVBAR.LANG' | translate }}"  (change)="langSelected($event.value)" panelClass="panelResponsive">
        <mat-option *ngFor="let language of languages" [value]="language.value">
          <span>{{language.lang}}
            <span>
              <img src="{{language.img}}">
            </span>
          </span>
        </mat-option>
    </mat-select>
  </mat-form-field>

我的语言数组是：

languages = [
    {
        'lang': '',
        'value': 'es-ES',
        'img': '/assets/images/languages/spainIco.png',
        'alt': 'SP'
    }, {
        'lang': '',
        'value': 'en-GB',
        'img': '/assets/images/languages/ukIco.png',
        'alt': 'UK'
    }
];

我想做的是，如果我选择西班牙语，下次打开下拉菜单时，只会出现英语选项，反之亦然。

谢谢大家。

【问题讨论】：

标签： angular select angular-material

【解决方案1】：

当然，使用 getter 过滤语言列表：

get filteredLanguages() {
  return this.selectedLanguage ? 
    this.languages.filter(language => language.value !== this.selectedLanguage.value) : 
    this.languages;
}

<mat-option *ngFor="let language of filteredLanguages" [value]="language.value">

【讨论】：

是的，但仅在页面启动时调用，当我更改选项时它不会被调用方法
它应该：通过设置你选择的语言的值，Angular 触发一个变化检测，这意味着 getter 的值和视图被更新。
正如您在this stackblitz 中看到的那样，它按预期工作。
This one 可以工作。
@trichetriche 返回此内容，我正在尝试显示所选值，我了解代码并且知道它是如何工作的，但是如果我显示所选选项，则过滤器不起作用。有什么线索可以在选择后显示值而无需更改占位符值？

【解决方案2】：

您可以通过 css 属性 display: none 隐藏 mat-option。为此，您可以添加特定的类，例如“无”

在html中：

<mat-option *ngFor="let languageOption of languages" [value]="languageOption.value" [ngClass]="{'d-none': isAlreadySelectedLanguageOption(languageOption )}">

在ts中：

isAlreadySelectedLanguageOption(languageOption): boolean {
    return this.form.languages.some((language) => language.value === languageOption.value);
}

【讨论】：