ホーム>source

角材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'
    }
];

私がやりたいのは、スペイン語を選択した場合、次回ドロップダウンを開くと、英語オプションのみが表示され、逆も同様です。

どうもありがとう。

あなたの答え
  • 解決した方法 # 1

    確かに、ゲッターを使用して言語のリストをフィルタリングします:

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

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ Laravel Listener Queue varエラー