Assigning a different ngModel value under ngFor

Question

I am printing a list of grades from an object called grades but I also want to create a slider component for each grade and the value of the slider is coming from a list. I notice that you can't really assign a function to [(ngModel)]. So [(ngModel)]=getGrades(i) does not work. What would be the best way to do it?

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

sliderGrades will contain a fixed amount of value. It just needs to assign it to the first top 3 grades. As an example, in my html, if my grades has a range of A, B, C, D, E, F it should show

A  slider 70
B  slider 20
C  slider 10
D  slider 0
E  slider 0
F  slider 0

Answer 1

Try out only square brackets.

<slider [ngModel]=getGrades(i)></slider>