如何按项目索引显示选定值?Javascript角

Question

您可以在这里看到完整的代码。这是主要问题。

https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html

当你点击球，圈这个绿色。每个圆都有自己的值。当您在所有选项卡上单击第一张卡片的值并且该值保持选中时，可以看到这一点。我想点击绿色的圆圈，只为那张牌写一个值，只写那个value元素。

索引有问题。这是函数:

selectedSet(object, index) {
console.log(object, index);
// this.showNote = this.showNote === index ? null : index; 
this.selectedSetValue = object;
}

我再说一遍。当我点击绿色的球时，我只想看到那张牌上的值，而不是所有的。

重要:

前两行，球的值为0…不要混淆

Answer 1

我将为每个练习添加一个选定的属性。它会是本地选定值。我做了什么?

public trainingExercises = [];
ngOnInit() {
this.trainingExercises = this.data.trainingExercises.map(el => {
el["selected"] = 0;
return el;
});
}
selectedSetValueData(obj, training) {
training.selected = obj.value;
}

和html:

的小改动<div class="column-holder" *ngFor="let training of trainingExercises; let i = index;">

<input
...
[(ngModel)]="training.selected"
/>

<div class="circle" *ngIf="!trainingSet.isTimed"
(click)="selectedSetValueData(trainingSet, training)">

演示:https://stackblitz.com/edit/test-trainin-2-gnt42a?file=src/app/app.component.html