Ionic：将 3 个双旋钮范围滑块绑定到单个模型

Question

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

 <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"。我试图将它们绑定到我名为 "config" 的界面的不同元素，但这没有用。我还在限制中创建了名为 upper/lower 的字段，但它没有用。将范围绑定到三个不同的 Imodels 有效。然后我将它映射到我的数据库模型并将它们保存到 Firefase。但他们的另一轮没有工作——旋钮不接受数据库中的值。谢谢你的帮助。

Answer 1

通过为每个 Range-Slider 使用一个模型并在提交之前将两个方向的值映射到我的数据库对象和从我的数据库对象中映射出来，我自己解决了这个问题。

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

Ionic：将 3 个双旋钮范围滑块绑定到单个模型

Ionic: binding 3 dual knob range slides to a singel model

ionic-framework

angular-ngmodel