Ionic：綁定3雙旋鈕範圍幻燈片到singel模型

我使用Ionic 3作爲我的應用程序的框架。該應用程序有一個小配置頁面。用戶可以通過三個雙旋鈕滑塊選擇不同的範圍。這個想法是，這些上限和下限用於驗證用戶可以在其他頁面上輸入的數據。如果一個值不在這個範圍內，用戶會得到一個警報 - 敬酒。即時通訊使用firebase/angularfire2作爲數據庫。我用3個滑塊的HTML代碼如下所示：Ionic：綁定3雙旋鈕範圍幻燈片到singel模型

<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>

我想這三個範圍綁定到一個單一的模式，直接將其存儲在火力點。所以我創建了一個接口，但我只能將一個範圍綁定到該接口。其他2個範圍的旋鈕不能移動，並在其旋鈕上說出「NaN」。我試圖將它們綁定到我的界面的不同元素，稱爲「配置」，但那不起作用。我也創建了限制上限/下限的字段，但它沒有奏效。將範圍綁定到三個不同的工作模式。然後我將它映射到我的數據庫模型並將它們保存到firefase中。但他們其他人不起作用 - 旋鈕不接受數據庫中的值。感謝您的幫助。

來源

2017-08-11 mario

通過使用每個Range-Slider的單個模型自己解決它，並在提交之前在我的數據庫對象的兩個方向上映射值。

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

來源

2017-08-11 18:25:08 mario

Ionic：綁定3雙旋鈕範圍幻燈片到singel模型

回答

相關問題