Angular "select"输入，根据所选选项更改变量

Question

我有一个问题。 我正在使用 Angular 2。我在 html 中有一个下拉选择，在 TS 文件中有一个变量“selectedVariable”。我想在选择一个选项时更改 TS 文件中的变量。

例如: 当有人选择:“SCRYPT”时，变量“selectedAlgorithm”会更新为值“SCRYPT”。

我是一个 Angular 初学者，谢谢你的帮助。

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

使用 Two-way binding [(ngModel)]="selectedAlgorithm"
Angular 中的双向绑定(bind)是模型和 View 之间的同步。当模型中的数据发生变化时， View 反射(reflect)变化，当 View 中的数据发生变化时，模型也随之更新

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