LWC中lightning-combobox选中值后回显Select Progress问题求助

lightning-combobox 组件的value属性仅接受字符串类型入参，原有代码存在核心类型不匹配问题：

• 下拉选项options中配置的value均为数字类型
• onchange事件返回的event.target.value为字符串类型，赋值给绑定变量后，组件无法在选项列表中匹配到同类型同值的选项，因此无法持久化显示选中内容，始终回退展示占位符。

• 将所有下拉选项的value统一改为字符串类型，保证和组件绑定值的类型完全一致
• 计算时长时，先将拿到的字符串值转为浮点数再做减法运算，避免出现字符串拼接等计算异常
• 同步修正占位符文本，匹配时间选择的业务场景

HTML 代码 #

<template>
    <lightning-card>
        <lightning-combobox
                class="slds-var-m-around_medium" 
                name="startTime"
                label="Starts"
                value={value1}
                placeholder="Select Start Time"
                options={options1}
                onchange={handleChange1} >
        </lightning-combobox>
        <lightning-combobox
                class="slds-var-m-around_medium" 
                name="endTime"
                label="Ends"
                value={value2}
                placeholder="Select End Time"
                options={options2}
                onchange={handleChange2}>
        </lightning-combobox>
        <div class="slds-var-m-around_medium lgc-bg">
            <lightning-input type="text" label="Duration (hours)" value={duration} readonly></lightning-input>
        </div>
    </lightning-card>
</template>

JS 代码 #

import { LightningElement, track } from 'lwc';

export default class Combobox extends LightningElement {
    @track value1 = '';
    @track value2 = '';
    @track duration = 0;
    @track options1 = [
        { label: '12:00 AM', value: '0' },
        { label: '12:15 AM', value: '0.25' },
        { label: '12:30 AM', value: '0.50' },
        { label: '12:45 AM', value: '0.75' },
        { label: '1:00 AM', value: '1' },
        { label: '1:15 AM', value: '1.25' },
        { label: '1:30 AM', value: '1.50' },
        { label: '1:45 AM', value: '1.75' }
    ];

    @track options2 = [
        { label: '12:00 AM', value: '0' },
        { label: '12:15 AM', value: '0.25' },
        { label: '12:30 AM', value: '0.50' },
        { label: '12:45 AM', value: '0.75' },
        { label: '1:00 AM', value: '1' },
        { label: '1:15 AM', value: '1.25' },
        { label: '1:30 AM', value: '1.50' },
        { label: '1:45 AM', value: '1.75' }
    ];

    handleChange1(event) {
        this.value1 = event.target.value;
        // 已选结束时间时自动重算时长
        if(this.value2) {
            this.calculateDuration();
        }
    };

    handleChange2(event) {
        this.value2 = event.target.value;
        this.calculateDuration();
    };

    // 抽离公共时长计算逻辑
    calculateDuration() {
        const start = parseFloat(this.value1);
        const end = parseFloat(this.value2);
        this.duration = end >= start ? (end - start).toFixed(2) : 0;
    }
}

修正代码额外做了逻辑优化：抽离公共时长计算方法，选择开始时间时若已选择结束时间会自动重算时长，增加结束时间早于开始时间的异常兜底，时长结果保留两位小数，初始绑定值改为空字符串匹配未选择状态，区分两个下拉框的name属性避免潜在冲突，时长输入框设为只读防止用户误改。

内容的提问来源于stack exchange，提问作者Jose Roman