I am working on a project where I need to display a list of grades from an object called 'grades'. Additionally, I want to integrate a slider component for each grade, with the value of the slider corresponding to a predefined list. However, it seems that assigning a function to [(ngModel)] is not as straightforward. The approach of [(ngModel)]=getGrades(i) does not yield the desired result. What would be the most effective way to achieve this?
<div *ngFor= "let item of grades; index as i">
<h6> Grades: {{item}} </h6>
<slider [(ngModel)]=getGrades(i)></slider> <--this doesn't work
</div>
myGrades: SliderValue;
getGrades(i) {
let sliderGrades = [70, 20, 10]
this.myGrades = [parseInt(sliderGrades[i].toString())];
return this.myGrades;
}
The array 'sliderGrades' will have a set number of values which need to be assigned accordingly to the top three grades. For instance, if the grades range from A to F: it should appear as follows in the HTML:
A slider 70
B slider 20
C slider 10
D slider 0
E slider 0
F slider 0