仍然很新，但是每天需要学习更多！
我正在研究兽药剂量计算器，该计算器根据每种药物的浓度，该药物的mg / kg剂量和以千克为单位的患者体重来计算每种药物的单独剂量。我有一个磅换算器-> kgs，如果我只有一个浓度，我的计算就可以了。问题是许多药物具有多种浓度，因此我需要选择输入以允许用户更改每种药物的浓度。
这里是REPL
这是我的代码：
<div class="row no-gap">
<div class="col-50 tablet-25">
<div class="item-content item-input item-input-outline item-input-with-value">
<div class="item-inner">
<div class="item-title item-label">Pounds</div>
<div class="item-input-wrap">
<input value={l} on:input="{e => setBothFromL(e.target.value)}" min="0" type=number placeholder=" lbs">
</div>
</div>
</div>
</div>
<div class="col-50 tablet-25">
<div class="item-content item-input item-input-outline item-input-with-value">
<div class="item-inner">
<div class="item-title item-label">Kilogram</div>
<div class="item-input-wrap">
<input value={k} on:input="{e => setBothFromK(e.target.value)}" min="0" type=number placeholder="kgs">
</div>
</div>
</div>
</div>
</div>
<h1>Antibiotics</h1>
{#each antibiotics as antibiotic, i}
<div class="Rtable-row eachdrug eachdrugE" data-id="{i + 1}">
<div class="Rtable-cell drug-cell">
<span class="drugTitle searchme">{antibiotic.name}
{#if antibiotic.concSelect.length === 1}
{antibiotic.concentration} {antibiotic.perml}
{:else if antibiotic.concSelect.length > 1}
<select bind:value={selected} on:change="{() => concs = selected}">
{#each antibiotic.concSelect as concSelect}
<option value={concSelect.conc}>
{concSelect.name}
</option>
{/each}
</select>
{/if}
</span>
</div>
</div>
<div>
<div>
Dose: <input bind:value={antibiotic.dosevalue} step={antibiotic.dosestep} min="{antibiotic.dosemin}" max="{antibiotic.dosemax}" type=number>
{#if antibiotic.dosevalue > antibiotic.dosemax * 1.1 }
<span class="error-message1 hidden-print" transition:fly="{{ y: 10, duration: 500 }}"><i class="fas fa-exclamation-triangle fa-sm fa-fw hidden-print" data-fa-transform="up-2"></i> Above Range</span>
{/if}
</div>
<div> <span class="vol">{(k * antibiotic.dosevalue).toFixed(antibiotic.decimal)} {antibiotic.appendose}</span>
<span class="vol">{#if antibiotic.concSelect.length === 1}
{((k * antibiotic.dosevalue) / antibiotic.concentration).toFixed(antibiotic.decimal)} {antibiotic.appendvol}
{:else if antibiotic.concSelect.length > 1}
{((k * antibiotic.dosevalue) / concs).toFixed(antibiotic.decimal)} {antibiotic.appendvol}
{/if} </span></div>
</div>
{/each}
<style>
input{min-width:120px}
.vol {
background: rgba(0, 0, 0, .12); padding:5px;}
.error-message1 {
font-size: 10px !important;
line-height: 11px !important;
font-weight: normal;
color: red;
opacity: 0.5;
font-weight: 700;
}
.eachdrug {border-top: 1px solid #ccc; margin-top:15px}
</style>
<script>
import { fade, fly } from 'svelte/transition';
let k = '';
let l = '' ;
let selected;
let concs ="";
function setBothFromK(value) {
k = +value;
l = +( k * 2.2046226218).toFixed(1);
}
function setBothFromL(value) {
l = +value;
k = +( l / 2.2046226218).toFixed(1);
}
let antibiotics = [
{
"group":"",
"route":"IV,IM,SQ BID",
"perml":"mg/ml",
"concentration":"50",
"concSelect": [
{ "conc": 50, "name": "50 mg/ml","perml": "ml" }
],
"perkg":"mg/kg",
"doseper":"10",
"dosemin":"10",
"dosemax":"30",
"dosestep":"1",
"dosevalue":"10",
"hide":"",
"name":"Amikacin",
"calc":"Amikacin",
"calcID":"Amikacin2",
"decimal": "2",
"appendose": " mg",
"appendvol": " ml",
"multiply": "",
"class": "drug",
"color": "green"
},
{
"group":"",
"route":"BID",
"perml":"mg/ml",
"concentration":"50",
"concSelect": [
{"id": 1 , "conc": 50, "name": "50 mg/ml","perml": "ml" },
{"id": 2 , "conc": 100, "name": "100 mg/ml","perml": "" },
{"id": 3 , "conc": 150, "name": "150 mg/ml","perml": "" },
{"id": 4 , "conc": 200, "name": "200 mg/ml","perml": "" },
{"id": 5 , "conc": 400, "name": "400 mg/ml","perml": "" }
],
"perkg":"mg/kg",
"doseper":"11",
"dosemin":"11",
"dosemax":"22",
"dosestep":"1",
"dosevalue":"11",
"hide":"",
"name":"Amoxicillin",
"decimal": "2",
"appendose": " mg",
"appendvol": " ml",
"class": "drug"
},
{
"group":"",
"route":"BID",
"perml":"mg/ml",
"concentration":"62.5",
"concSelect": [
{"id": 1 , "conc": 62.5, "name": "62.5","perml": "ml" },
{"id": 2, "conc": 125, "name": "125","perml": "" },
{"id":3 , "conc": 250, "name": "250","perml": "" },
{"id": 4, "conc": 375, "name": "375","perml": "" }
],
"perkg":"mg/kg",
"doseper":"13.75",
"dosemin":"13.75",
"dosemax":"25",
"dosestep":"1",
"dosevalue":"13.75",
"hide":"",
"name":"Amoxicillin-Clavulanate",
"calc":"Amoxicillin-Clavulanate",
"calcID":"Amoxicillin-Clavulanate2",
"decimal": "2",
"appendose": " mg",
"appendvol": " ml",
"class": "drug",
},
{
"group":"",
"route":"BID",
"perml":"mg/ml",
"concentration":"100",
"concSelect": [
{"id": 1 , "conc": 100, "name": "100","perml": "ml" },
{"id": 2 , "conc": 125, "name": "125","perml": "" },
{"id": 3 , "conc": 250, "name": "250","perml": "" },
{ "id": 4 ,"conc": 500, "name": "500","perml": "" }
],
"perkg":"mg/kg",
"doseper":"6.6",
"dosemin":"6.6",
"dosemax":"22",
"dosestep":"1",
"dosevalue":"6.6",
"hide":"",
"name":"Ampicillin",
"calc":"Ampicillin",
"calcID":"Ampicillin2",
"decimal": "2",
"appendose": " mg",
"appendvol": " ml",
"class": "drug"
}
];1
</script>
问题是：
在页面加载时，最初在药物剂量方程式中未使用选择选项值（我得到NaN或Infinity）。选择之后，就是。
更改选择选项会更改所有药物浓度，而不仅仅是单个药物浓度。
任何帮助将不胜感激。
答案 0 :(得分：2)
每种抗生素都有以下一种：
<select bind:value={selected} on:change="{() => concs = selected}">
...
</select>
您的on:change处理程序在这里不是必需的，因为它是一个简单的任务。因此，您可以bind:value={concs}完全相同。您正在使用两个变量，而您可以使用一个变量。这也是您看到NaN值的原因，因为concs变量直到更改所选选项才设置。通过直接绑定到跟踪变量，您可以解决第一个问题。
但是，您还使用单个变量（或变量对，如上所示）来跟踪几个 distinct 选择字段中的更改，这就是您真正的问题所在。对于每个选择字段，您都希望一个不同的变量来跟踪其选择的值。
您可以轻松地做到这一点，只需在每个concs上添加一个antibiotic键，并将其设置为您希望的默认值，然后使用简化绑定，最后更新依赖该值进行浓度计算的那一行：
<select bind:value={antibiotic.concs}>
...
</select>
...
{#if antibiotic.concSelect.length === 1}
...
{:else if antibiotic.concSelect.length > 1}
{((k * antibiotic.dosevalue) / antibiotic.concs).toFixed(antibiotic.decimal)}{antibiotic.appendvol}
{/if}
...
<script>
...
let antibiotics = [
{
...
"concs" = 50,
},
{
...
"concs" = 100,
},
{
...
"concs" = 62.5,
},
{
...
"concs" = 100,
},
]
...
</script>