Как я могу поменять местами значения опций двух элементов HTML <select>?

Question

Я пытаюсь поменять местами два значения выбора в моем конвертере валют. У меня есть значок ссылки, который активирует функцию swapOptions, которая меняет местами два значения. Эта часть работает нормально. Вопрос в том, как установить эти новые значения для элемента «select»?

Это моя функция машинописного текста, и я вижу в консоли новые значения, которые должны быть установлены в опции выбора:

startSwap:any;
endSwap: any;
swapOptions(firstOption: any, secondOption: any){

for(let i = 0; i < this.parsedJson.length; i++){
  if(firstOption == this.parsedJson[i].Srednji){
    this.endSwap = this.parsedJson[i].SelectOption;
  }
  else if(secondOption == this.parsedJson[i].Srednji){
    this.startSwap = this.parsedJson[i].SelectOption;
  }
}
console.log("New start option : "+this.startSwap)
console.log("New end option : "+this.endSwap)
}

Это мой html. Я пробовал использовать [(ngModel)], но при изменении получаю пустые элементы выбора.

  <select name="options" #firstSelect id="slc" class="form-control" [(ngModel)]="startSwap">
      <option *ngFor="let a of parsedJson;" class="form-control" (click)="firstSelectValues(a.Jedinica, a.Valuta)" (click)="intervalCurrencyStats()" [(value)]="a.Srednji">{{a.SelectOption}}</option>
    </select>
    <p id="p">End value:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#converter" style="cursor: pointer;" (click)="swapOptions(firstSelect.value, secondSelect.value)" ><i class="fa fa-arrows-v"></i></a></p>
    <select name="options2" #secondSelect id="slc" class="form-control" [(ngModel)]="endSwap">
      <option *ngFor="let a of parsedJson;" class="form-control" (click)="secondSelectValues(a.Jedinica, a.Valuta)" [(value)]="a.Srednji">{{a.SelectOption}}</option>
    </select>

На этом рисунке вы можете увидеть два элемента выбора и синюю стрелку, которая является ссылкой на функцию swapOption. Пустые поля являются результатом нажатия стрелки.

введите описание изображения здесь

Любые советы приветствуются. Заранее спасибо!

Angular CLI: 9.1.8 Узел: 12.13.0

Answer 1

Через какое-то время я понял это. Теперь с помощью formGroup и управления формой

import { FormControl, FormGroup, FormsModule, FormBuilder } from '@angular/forms';

Некоторые изменения в HTML:

  <form [formGroup]="crForm">
    <select name="options"  #firstSelect id="slc" class="form-control" formControlName="crControl">
      ...
    </select>
    <select name="options2" #secondSelect id="slc" class="form-control" formControlName="crEndControl">
      ...
    </select>
  </form>

И в машинописный текст добавлен private fb: FormBuilder в конструкторе и formbuilder группа для установки новых значений в select-option (также добавлена ​​внутри onInit () с жестко заданными значениями по умолчанию):

this.crForm = this.fb.group({
  crControl: [this.startSwap],
  crEndControl: [this.endSwap]
})