Question

所以我的代码中有两个ng-select，如果我选择第一个ng-select值，我想在第二个ng-select中隐藏相同的选择选项。但是我不知道如何控制它。我想使用Jquery，但没有机会。 sourceLangCodeList和targetLangCodeList都有值[EN，KR] 所以我想尝试的事情是，一旦我选择了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

请在slectedSoureclang中添加一个ngModel，然后按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中，请不要忘记取消订阅。

Angular 7，如何通过选择其他ng-select值来控制ng-select选项？

2 个答案: