Question

我已经两次使用了组件（ngx-select），一个用于出发站，另一个用于到达站。除用户选择的元素外，每个组件中的每个组件都包含相同的数据列表。（示例：如果初始列表包含['1'，'2'，'3']，并且用户选择了' 2'离开出发组件，则其他组件中不存在，反之亦然）。这个问题既简单又复杂。我有一个按钮，它交换用户选择的两个元素（出发和到达的站点），我交换值（我在控制台中检查值），但它们不会显示在组件中（一旦交换，输入变为空）。

这是我的html：

<form action="#0">
  <div class="form-group col-md-4 col-sm-4">
   <label for="gare-depart">Gare de départ</label>
    <ngx-select [formControl]="ngxControl" name="ngxControl" [allowClear]="true [items]="liste_gares_depart_string" placeholder="Gare de départ"     (select)="doSelectDepart($event)"  (remove)="doRemoveDepart($event)"></ngx-select>
  </div>
  <div class="form-group swapButton col-md-2">
   <button class="btn btn-default" (click)="swapInputs()">
  </div>
  <div class="form-group col-md-4 col-sm-4">
   <label for="gare-arrivee">Gare d'arrivée</label>
    <ngx-select [formControl]="ngxControl2" name="ngxControl2" [allowClear]="true" [items]="liste_gares_arrive_string" placeholder="Gare d'arrivée" (select)="doSelectArrive($event)" (remove)="doRemoveArrive($event)">
    </ngx-select>
  </div>
  </form>

这是我的打字稿方法：

public swapInputs() {
const tmp = this.gare_depart;
this.doSelectDepart(this.gare_arrive);
this.doSelectArrive(tmp);
}

// enlève la gare choisie de la liste des gares d'arrivée
public doSelectDepart = (value: any) => {
this.gare_depart = value;
let data = Object.assign([], this.BackUp_liste_gares_string);
data.splice(data.indexOf(value), 1);
this.liste_gares_arrive_string = data;
}

// enlève la gare choisie de la liste des gares de départ
public doSelectArrive = (value: any) => {
this.gare_arrive = value;
let data = Object.assign([], this.BackUp_liste_gares_string);
data.splice(data.indexOf(value), 1);
this.liste_gares_depart_string = data;
}

Answer 1

我找到了解决方案。我忘了添加要在组件中显示的值（我显示的是列表中不存在的值，这是我在第4行和第5行中纠正的内容）。我使用setValue交换值。希望我的解释清楚。

1  const tmp = this.garesForm.controls.ngxControl.value;
2  this.gare_arrive = this.garesForm.controls.ngxControl.value;
3  this.gare_depart = this.garesForm.controls.ngxControl2.value;
4  this.liste_gares_depart_string = Object.assign([], this.BackUp_liste_gares_string);
5  this.liste_gares_arrive_string = Object.assign([], this.BackUp_liste_gares_string);
6  setTimeout(() => {
7   this.garesForm.controls.ngxControl.setValue(this.garesForm.controls.ngxControl2.value);
8   this.garesForm.controls.ngxControl2.setValue(tmp);
9  const liste = Object.assign([], this.liste_gares_depart_string);
10  setTimeout(() => {
11    this.doSelectDepart(this.gare_depart);
12     this.doSelectArrive(this.gare_arrive);
13   }, 50);
14 }, 0);

交换两个ngx-select的值

1 个答案: