从Lightning-Combobox选择一个选项后，下拉菜单“选择进度”。而不是我选择的选项

Question

当我从下拉列表（Combobox）中选择一个值时，我选择下拉菜单显示“选择进度”。

如何使代码显示我选择的值... ???

我试图在一个组合蛋白之一上显示开始时间，另一个结束时间，但是每次我选择一个选项时，值都会消失，而是显示“选择进度”。第二组合中也是如此。 值正确地传递给了JS代码，但没有留在下拉列表中。

HTML

<template>
    <lightning-card>
        <lightning-combobox
                class="slds-var-m-around_medium" 
                name="progress"
                label="Starts"
                value={value1}
                placeholder="Select Progress"
                options={options1}
                onchange={handleChange1} >
        </lightning-combobox>
        <lightning-combobox
                class="slds-var-m-around_medium" 
                name="progress"
                label="Ends"
                value={value2}
                placeholder="Select Progress"
                options={options2}
                onchange={handleChange2}>
        </lightning-combobox>
        <div class="slds-var-m-around_medium lgc-bg">
            <lightning-input type="text" label="Duration" value={duration}></lightning-input>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement, track } from 'lwc';

export default class Combobox extends LightningElement {
    @track value1 = 0;
    @track value2 = 0;
    @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.duration -= event.target.value;
        this.value1 = event.target.value;
        
    };

    handleChange2(event) {
        this.value2 = event.target.value;
        this.duration = this.value2 - this.value1;
    };


}

之前：
在此处输入图像描述

之后： 在此处输入图像描述

Answer 1

按照 nofollow noreferrer“> lightning-combobox文档使用event.detail.value在onChange中获取所选值。

event.detail.value作为字符串而不是整数传递（例如'0.25'，而不是0.25）。然后，当您设置字符串值而不是整数时，找不到该选项，并且以未定义显示（select progress）。

您可以将值更改为字符串：

const options = [
  { 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' }
];

...或者可以在handlechange（）函数中解析整数：

handleChange(e) {
  this.value = +e.detail.value; // One of the ways to convert str to int
};

希望这会有所帮助。愉快的编码。