typescript 重置Angular 下拉菜单

vlju58qv  于 2023-03-19  发布在  TypeScript
关注(0)|答案(1)|浏览(145)

我有一个下拉菜单,我不能重置。当我点击“清除”我希望下拉菜单重置,但它停留在最后一个选择。
我成功地用同样的方法重置了另一个下拉菜单,但是我不能重置第一个下拉菜单。我是一个Angular 新手,希望能得到任何帮助。

<div class="db-dropdown">
    <label for="dbdropdown">Site selection:</label>
    <select required class="dbdropdown" name="dbdropdown" id="dbdropdown" [(ngModel)]="selectedLabel" (change)="onSelect(selectedLabel)" [disabled]="isRunning">
        <option value='Please select DB'>Please select DB</option>
        <option *ngFor="let option of options" [ngValue]="option.label">{{option.label}}</option>
    </select>

    <div *ngIf="selectedValues && selectedValues.length">
        <app-connectionCode-dropdown></app-connectionCode-dropdown>
    </div>
</div>

这是下拉列表中的ngOnInit。ts:

ngOnInit() {
    this.selectedLabel = this.dataService.selectedLabelDBSelection;
    this.DBDropdownService.getOptions().subscribe(options => {
      this.options = options;
    });
    this.dataService.isRunning$.subscribe(isRunning => this.isRunning = isRunning)
  }

按钮的复位方法ts:

resetSelects() {
    console.log('resetting selects');
    this.dataService.setRunClick(false);
    this.dataService.setSelectedValueDb('Please select DB');
    this.dataService.setSelectedLabelDBSelection('Please select DB');
    console.log('selectedLabelDBSelection:', this.dataService.selectedLabelDBSelection);
    this.dataService.setSelectedValue('');
    this.dataService.setSelectedProcedure('');
    this.dataService.clearContents.next(true);
    this.dataService.setIsRunning(false);
  }

以及服务上的相关方法:

setSelectedLabelDBSelection(value: string){
    this.selectedLabelDBSelection = value;
  }
selectedLabelDBSelection: string;
ubof19bj

ubof19bj1#

这似乎是您如何重置selectedLabelDBSelection值的问题。
resetSelectes()方法中,您使用setSelectedLabelDBSelection方法将selectedLabelDBSelection值设置为“请选择数据库”,但下拉列表值绑定到ngModel变量selectedLabel
尝试在resetSelectes()方法中将selectedLabel变量设置为“请选择数据库”,如下所示:

this.selectedLabel = 'Please select DB';

相关问题