Угловой вход «выбор», изменение переменной при выбранной опции

Question

У меня проблема.Я использую Angular 2. У меня есть выпадающий выбор в HTML и переменная selectedVariable в файле TS.Я хочу изменить переменную в файле TS, когда выбрана опция.

Например: Когда кто-то выбирает: «SCRYPT», переменная «selectedAlgorithm» обновляется со значением «SCRYPT».

Я начинающий, спасибо за помощь.

HTML:

<select class="form-control" id="allocation-algorithm">
      <option value="SHA-256">SHA-256</option>
      <option value="SCRYPT">SCRYPT</option>
      <option value="ETHASH">ETHASH</option>
      <option value="CRYPTONIGH">CRYPTONIGHT</option>
      <option value="X11">X11</option>
    </select>

TS:

import {Component} from '@angular/core';

import {HashrateAllocationService} from './hashrateAllocation.service';

@Component({
  selector: 'hashrate-allocation',
  templateUrl: './hashrateAllocation.html',
  styleUrls: ['./hashrateAllocation.scss']
})
export class HashrateAllocation {
  selectedAlgorithm = "SHA-256";

  allocationTableData:Array<any>;

  constructor(private _hashrateTableService: HashrateAllocationService) {
    this.allocationTableData = _hashrateTableService.allocationTableData;
  };
}

Answer 1

Использование Двухстороннее связывание [(ngModel)]="selectedAlgorithm"
Двухстороннее связывание в Angular - это синхронизация между моделью и видом.Когда данные в модели изменяются, представление отражает это изменение, а когда данные в представлении изменяются, модель также обновляется

HTML

<select class="form-control" id="allocation-algorithm" [(ngModel)]="selectedAlgorithm">
      <option value="SHA-256">SHA-256</option>
      <option value="SCRYPT">SCRYPT</option>
      <option value="ETHASH">ETHASH</option>
      <option value="CRYPTONIGH">CRYPTONIGHT</option>
      <option value="X11">X11</option>
    </select>

Компонент

import {Component} from '@angular/core';

import {HashrateAllocationService} from './hashrateAllocation.service';

@Component({
  selector: 'hashrate-allocation',
  templateUrl: './hashrateAllocation.html',
  styleUrls: ['./hashrateAllocation.scss']
})
export class HashrateAllocation {
  public selectedAlgorithm = "SHA-256";

  allocationTableData:Array<any>;

  constructor(private _hashrateTableService: HashrateAllocationService) {
    this.allocationTableData = _hashrateTableService.allocationTableData;
  };
}

DEMO