Question

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

 <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>

我想从组件文件中更改值，而无需从下拉菜单中选择选项。

Answer 1

尝试以下代码，

this.currentSnapshotPeriod = "some value"; /* This value should exist in option values*/

Answer 2

您在那里需要另一个变量，并将其设置为空。然后，如果不为空，则select中的显示为该变量，否则为另一个。示例：

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”

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

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

2 个答案: