在ngFor下指定不同的ngModel值

Question

我正在从一个名为grades的对象打印一个等级列表，但我也想为每个等级创建一个滑块组件，滑块的值来自列表。我注意到您不能真正为[(ngModel(]分配函数。因此[(ngModel(]=getGrades(i(不起作用。最好的方法是什么？

<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将包含固定数量的值。它只需要把它分配到前三名。例如，在我的html中，如果我的成绩范围为a、B、C、D、E、F它应该显示

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

Answer 1

只试用方括号。

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