Ionic:将 3 个双旋钮范围滑动绑定到一个单一型号

Question

我正在使用 Ionic 3 作为我的应用程序的框架。 该应用程序有一个小的配置页面。 用户可以通过三个双旋钮滑块选择不同的范围。 这个想法是，这些上限和下限用于验证用户可以在其他页面上输入的数据。 如果值不在此范围内， 用户会收到警报 Toast。 IM 使用 Firebase/Angularfire2 作为数据库。 我带有 3 个滑块的 HTML 代码如下所示：

<ion-item>
<ion-label>Range 1</ion-label>
<ion-range min="-250" max="250" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range1"  color="secondary">
<ion-label range-left>-250g</ion-label>
<ion-label range-right>250g</ion-label> 
</ion-range>
</ion-item>               
<ion-item>
<ion-label>Range2</ion-label>
<ion-range min="0" max="200" pin="true" dualKnobs="TRUE"  [(ngModel)]="config.range2" color="secondary">
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item>    
<ion-item>
<ion-label>Range3</ion-label>
<ion-range min="0" max="200" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range3"  color="secondary">
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item>   

我想将这三个范围绑定到一个模型中，以将其直接存储在 Firebase 中。所以我创建了一个接口，但我只设法将一个范围绑定到这个接口。其他 2 个范围的旋钮无法移动并在其旋钮上说"NaN"。我试图将它们绑定到我的界面中称为"配置"的不同元素，但这不起作用。我还在限制中创建了称为上限/下限的字段，但它不起作用。 将范围绑定到三个不同的模型是有效的。然后，我将其映射到我的数据库模型并将它们保存到Firefase。但是他们轮到的另一个不起作用 - 旋钮不接受数据库中的值。 谢谢你的帮助。

Answer 1

通过在提交之前为每个范围滑块使用单个模型并在两个方向上映射我的数据库对象的值来自己解决了这个问题。

slider1 = {} as any;
this.slider1.upper = (this.config.slider1max) ? this.config.slider1max : '100';
config.slider1max = this.slider1.upper;