在 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 将包含固定数量的值。它只需要将它分配给前 3 年级。例如，在我的 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>

在 ngFor 下分配不同的 ngModel 值

Assigning a different ngModel value under ngFor

slider

typescript

angular-ngmodel

angular