Question

我有一个带有数字的输入和一个带有时间单位的选择菜单。使用选择菜单，您可以更改将转换输入值的单位。如果无法将转换转换为0位小数，我想将选择菜单恢复为上一个选项。

除了选择菜单还原之外，这可以正常工作。我的绑定值会更改但不会显示选项。我只能通过setTimeout（）来改变它，这会使所选选项闪烁回到上一个选项。

如何在不使用setTimeout的情况下还原它？

组件的HTML

<div class="form-group">
    <div [formGroup]="form">
        <label for="label" id="programming-details" class="label">{{label}}</label>
        <input type="text" hidden="hidden" [(ngModel)]="msCounterValue" [formControlName]="formControlName" />
    </div>
    <input type="number"
           class="input-time" 
           [(ngModel)]="counterValue"
           min="{{minValue}}"
           max="{{maxValue}}"
           (keyup)="inputValueChange()"
           pattern="{{regex}}"
           (change)="inputValueChange()"
           required="{{required}}" />
    <select [(ngModel)]="selectedValue" ng-init="selectedValue.name" name="selectUnitType" (ngModelChange)="selectValueChange($event)">
        <option *ngFor="let name of UnitTypes" [ngValue]="name">
            {{name.name}}
        </option>
    </select>
</div>

ts组件方法

selectValueChange(event: any) {
        //Do the conversion asked for and get the value.
        var displayValue = this.timeDurationFilterHelper.Convert(this.counterValue, this.selectedValue.name, this.lastValue.name);
        //Check to see if the new value is a whole number. If it is update UI.
        if (displayValue % 1 == 0) {
            this.lastValue = this.selectedValue;
            this.counterValue = displayValue;
        }
        //Temporary fix added in using setTimeout
        else {
            var lastValueIndex = this.lastValue.Index;
            setTimeout(() => {
                this.selectedValue = this.UnitTypes[lastValueIndex], 1
            });
        }
        this.cdRef.detectChanges();
    }

还原选择菜单更改

0 个答案: