0
我使用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中。但他們其他人不起作用 - 旋鈕不接受數據庫中的值。 感謝您的幫助。