时间戳

首页 > 解决方案 > 如何以编程方式更改下拉值

angular - 如何以编程方式更改下拉值

问题描述

我有一个下拉菜单，我想在单击按钮时更改组件文件中的下拉值

 <select
      id="currentPeriodDropDown"
      (change)="onCurrentSnapshotPeriodChange()"
      [(ngModel)]="currentSnapshotPeriod"
      class="form-control form-control-sm mr-1 form-control-sm-ipad"
    >
      <option [ngValue]="period" *ngFor="let period of snapshotPeriods"
        >{{ period?.periodName }}
      </option>
    </select>

我想在不从下拉列表中选择选项的情况下更改组件文件中的值。

标签： angulartypescriptangular8

解决方案

您需要另一个变量，然后将其设置为空。然后选择中的显示是那个变量，如果不是空的，或者另一个，如果是。例子：

TS 文件：

var displayInSelect: string;

buttonClicked() {
   this.displayInSelect = 'Whatever You Want';
}

然后你的 HTML 是：

    <select id="currentPeriodDropDown" 
      (change)="onCurrentSnapshotPeriodChange()" 
      [(ngModel)]="currentSnapshotPeriod" 
      class="form-control form-control-sm mr-1 form-control-sm-ipad">
        <option [ngValue]="period" *ngFor="let period of snapshotPeriods">
          {{ displayInSelect?displayInSelect:(period?.periodName) }}
        </option>
    </select>

然后按钮（单击）将调用函数“buttonClicked”

请注意，这不会更改您选择的选项，只会更改选择中显示的值

推荐阅读