0

I'm new to Ionic and TypeScript. I'm trying to set the initial values for my Ionic Range (V5) but I'm having some issues. According anothers posts, in the ngModel there are upper and lower properties but I'm not sure the best way to set that properties.

My html:

<ion-range dual-knobs pin color="primary" max="460" min="300" debounce="500" [(ngModel)]="VKnobValues" (ionChange)="VKnobVal($event)">

My ts 1: The initial values are updated but knobs are not updated dynamically:

public VKnobValues = {lower:380, upper:380}; 

someFunction (VMin, VMax){
   // This doesn't work
   this.VKnobValues.lower = VMin;      
   this.VKnobValues.upper = VMax;
}

VKnobVal(event:any){  
   console.log ("VKNobVal:" + JSON.stringify(event.detail.value));  
}

My ts 2: I have no Initial values and the knobs are not updated dynamically:

public VKnobValues = new Object();

someFunction (VMin, VMax){
   // This doesn't work
   this.VKnobValues["lower"] = VMin;
   this.VKnobValues["upper"] = VMax;      
}

VKnobVal(event:any){  
   console.log ("VKNobVal:" + JSON.stringify(event.detail.value));  
}

My ts 3: I have no Initial values and the knobs are updated dynamically:

public VKnobValues = new Object();

someFunction (VMin, VMax){
   // This works
   this.VKnobValues = {
    lower:VMin,
    upper:VMax
  } 
}

VKnobVal(event:any){  
   console.log ("VKNobVal:" + JSON.stringify(event.detail.value));  
}

My ts 3 works ok but I have no reference to upper and lower properties if I need to do some conditional if somewhere in the code for example using my ts 1:

if (this.lastVMax != this.VKnobValues.upper)
{
   // Do something

   this.lastVMax = this.VKnobValues.upper;
}

Yes, I could use some extra variables but maybe I'm doing something wrong. Any advice? Thanks

Edit: For better understanding I added my VKnobVal function

Edit 2: Added original functions

Bluetooth Data Function:

BTData() {

 let Buffer = new Uint8Array(64);
 let i = 0;
 let myZone = new NgZone({ });
 let waitEnc:boolean = true;
    
 this.BluetoothData = this.BTSerial.subscribeRawData().subscribe((data) => {    
   
   let Bytes = new Uint8Array(data);
   // Some Buffer Controls Here 

   // Bluetooth Data CMD
   if (Buffer[2] == 0x02 && i > 25)
   {          
    myZone.run(() => {        
    this.setListaValues(Buffer);            
   });
   waitEnc = true;
   i = 0;
  }
 },
 () => {});
}

// Populate list with values
setListaValues(Buffer:Uint8Array) {
 this.items = [];  

 this.VValMax = Math.round((cteVNADC + Buffer[5]) * 1.11);
 this.items.push ({
  param: this.Params[(2)],
  val:this.VValMax.toString(),
  icon:this.icon,
  color: this.colorIcon
 });    

 this.VValMin = Math.round((cteVNADC * 80 / 100 + Buffer[9]) * 1.11);
 this.items.push ({
  param: this.Params[(3)],
  val:this.VValMin.toString(),
  icon:this.icon,
  color: this.colorIcon
 });    

 // Only this works
 this.VKnobValues = {
  lower:this.VValMin,
  upper:this.VValMax
 }            

 this.items.push ({
  param: this.Params[(4)],
  val:(Buffer[6] * .05).toFixed(1),
  icon:this.icon,
  color: this.colorIcon
 });    

  this.items.push ({
   param: this.Params[(6)],
   val:(Buffer[7] * .1).toFixed(1),
   icon:this.icon,
   color: this.colorIcon
  });    
  
  this.items.push ({
   param: this.Params[(8)],
   val:(Buffer[8] * .3).toFixed(1),
   icon:this.icon,
   color: this.colorIcon
  });    
}
Madbyte
  • 95
  • 9
  • In the template you use the function VKnobVal($event) for the ionChange event but in your ts code you say that you use the function called someFunction(VMin, VMax) . Which one is it? – Tommi Mar 18 '22 at 15:04
  • Yes, I have VKnobVal function to see the changes made by the user, I have no problem with that. My app receives data from bluetooth and a I need to change the knobs inital values according to that data dynamically. I'm trying to understand why **my ts 3** works updating the knobs but **my ts 1** and **ts 2** doesn't according to how its ngModel object VKnobValues propierties _upper_ and _lower_ are updated. – Madbyte Mar 18 '22 at 16:25
  • 1
    I addded the function for better understanding. – Madbyte Mar 18 '22 at 16:36

1 Answers1

0

I think your first example should work, however if you check the documentation you can see that the attribute called "value" is used for controlling the value of the range, it could be that the ngModel attribute isnt available on the component. Have you tried changing [(ngModel)] to [value] so the following would look like:

For your template:

<ion-range dual-knobs pin color="primary" max="460" min="300" debounce="500" [value]="VKnobValues" (ionChange)="VKnobVal($event)">

And in your component add back:

public VKnobValues = {lower:380, upper:380}; 

I dont know which version of Ionic you are using but im linking the v6 documentation if you want to read more since the value attribute is used in both v5 and v6.

https://ionicframework.com/docs/api/range#value

Tommi
  • 381
  • 3
  • 13
  • HI, I'm using Ionic 5 and **dual** knobs that's why I'm using an object with _lower_ and _upper_ properties. https://ionicframework.com/docs/api/range#dualknobs – Madbyte Mar 23 '22 at 14:05
  • I see, i must've misread the documentation for Ionic 5 because i thought it said the value.attr only accepted a number while in Ionic 6 you could pass in a number or a object containing lower / upper aswell for the dualknob. However i still think replacing the [(ngModel)] to [value] should work for adding initial values to the ion-range, did you try it? – Tommi Mar 23 '22 at 14:37
  • Yes, I have exactly the same behavior than using ngModel. – Madbyte Mar 23 '22 at 14:48
  • I see, well I tried your first method and got it initialized correctly. But what do you mean that the knobs arent updated dynamically? – Tommi Mar 23 '22 at 15:34
  • I am receiving data via bluetooth. I'm trying to set or change Ionic Range dual knob Max/Min initial values ​​inside _Bluetooth Serial_ instance member `subscribeRawData()` (and then calling a function like my examples) seeing the changes/updates visually. That's what I call dynamically., As I said before, the only way they update visually is using my **ts 3**. – Madbyte Mar 23 '22 at 18:43
  • And yes, using my **ts 1** Max/Min are initialized but then when I'm receiving data they aren't updated. – Madbyte Mar 23 '22 at 19:00
  • 1
    Ah okey, i think it would've been easier to follow if that was included in the question along with all the .ts code. But the reason you are getting error when trying to access properties with the 3rd alternative is because Object being stricter than if you would use any. What you can do is to use the brackets notation to access the properties this.VKnobValues['upper'] but now you loose intelliSens and kinda goes against typescripts advantages. You could also give types to the Object like following public VKnobValues = new Object() **as {lower: number, upper: number}** – Tommi Mar 24 '22 at 07:09
  • Ok. I have tried your suggestion. I can reference now to object properties but the knob values are not updated using this kind of reference: `this.VKnobValues.lower = VMin`. Still the only way is like my **ts 3**. I can't understand why, Anyway thanks! – Madbyte Mar 25 '22 at 16:28
  • Yes i agree that it should work, id say that all 3 of your examples should update the value when calling someFunction(x,y). If you could update your question with all of your code it would be easier to debug, if that is possible? – Tommi Mar 28 '22 at 06:21
  • I added `BTData()` and `SetListaValues()` functions. I have removed everything related to bluetooth data buffer control for clarity. – Madbyte Mar 29 '22 at 22:44