Angular 7、如何通過選擇其他ng-select值來控制ng-select選項？

Question

所以我的代碼中有兩個 ng-select，如果我 select 第一個 ng-select 值，我想從第二個 ng-select 隱藏相同的 select 選項。 但我不知道如何控制它。 我想使用 Jquery ，但沒有機會。 sourceLangCodeList 和 targetLangCodeList 都有值 [ EN, KR ] 所以我想嘗試的東西，一旦我 select ng-select 之一的值，隱藏第二個 ng-select 具有的相同值。 請幫忙！

<td>
              <div class="form-group">
                <ng-select
                  id="sourceLangSelect"
                  bindLabel="language"
                  bindValue="language"
                  formControlName="sourceLangCode"
                  [items]="sourceLangCodeList"
                  (change)="onChange($event)"
                ></ng-select>
              </div>
            </td>
            <td></td>
            <td>
              <div class="form-group">
                <ng-select
                  id="targetLangSelect"
                  bindLabel="language"
                  bindValue="language"
                  formControlName="targetLangCode"
                  [items]="targetLangCodeList"
                ></ng-select>
              </div>
            </td>

Answer 1

請添加一個 ngModel 到 slectedSoureclang 和 Onchange 過濾 targetLangCodeList

                 <ng-select
              id="sourceLangSelect"
              bindLabel="language"
              bindValue="language"
              formControlName="sourceLangCode"
              [items]="sourceLangCodeList"
              (change)="onChange($event)"
              [(ngModel)]="selectedSourceLang"
            ></ng-select>

更改事件

  onChange(event){
                        
                        const newlist = targetLangCodeList.filter((lang)=>lang!==this.selectedSourceLang);
                        targetLangCodeList = [...newlist];
    
                      }

Answer 2

由於您使用的是 ReactiveForms，我將以 ReactiveForm 的方式回答。 在https://stackblitz.com/edit/m3yevn-ng-select-demo查看完整代碼

模板：

<div class="form-group" [formGroup]="formGroup">
    <ng-select id="sourceLangSelect" bindLabel="language" bindValue="language" formControlName="sourceLangCode"
        [items]="sourceLangCodeList"></ng-select>
    <ng-select id=" targetLangSelect" bindLabel="language" bindValue="language" formControlName="targetLangCode"
        [items]="targetLangCodeList"></ng-select>
</div>

零件

import { Component, Input } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { Subscription } from "rxjs";

@Component({
  selector: "ng-select-demo",
  templateUrl: "./ng-select-demo.component.html",
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class NgSelectDemo {
  @Input() name: string;
  sub = new Subscription();

  originalLangCodeList = [
    { language: "" },
    { language: "en" },
    { language: "kr" },
    { language: "zh-cn" },
    { language: "ru" }
  ];
  targetLangCodeList = [...this.originalLangCodeList];
  sourceLangCodeList = [...this.originalLangCodeList];

  formGroup = new FormGroup({
    sourceLangCode: new FormControl(""),
    targetLangCode: new FormControl("")
  });

  ngOnInit() {
    this.sub.add(
      this.formGroup.controls["sourceLangCode"].valueChanges.subscribe(
        value => {
          this.targetLangCodeList = this.originalLangCodeList.filter(
            langObj => langObj.language !== value
          );
        }
      )
    );
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

TLDR；

• 使用表單組創建您顯然正在使用的兩個 formControlName。
• 在 ngOnInit 中訂閱 formGroup.controls['sourceLangCode'] 的 valueChanges。
• 當值改變時，過濾targetLangCode中已經選擇的語言。
• 在 ngOnDestroy 中，不要忘記取消訂閱它。