Я вижу, что вы присваиваете значение isComplete глобальной переменной.Это разделяется всеми уроками, поэтому с вашей текущей логикой все они будут красными или черными.
Я бы реорганизовал существование isComplete как свойства в отдельном уроке, таким образом, вы получитеотдельное значение для каждого урока.
Вы можете обновить модель представления после ее поступления с сервера.Пока вы можете определить, завершен ли он или нет, не должно быть никаких причин, по которым вы не можете расширить виртуальную машину.
processedLessons = []
this.lessons.forEach(lesson => {
if (lesson.Status == "Complete") {
lesson.isComplete = true;
lesson.Status = this.var1;
processedLessons.push(lesson);
}
else {
lesson.Status = this.var2;
}
});
После этого я реорганизовал бы свой шаблон следующим образом:
<div class="row" *ngFor="let lesson of processedLessons">
<div>
<div class="flex">
<div>
Status: <span [ngClass]="{'red': !lesson.isComplete, 'black': lesson.isComplete }">{{ lesson.Status }}</span>
</div>
</div>
</div>
</div>
Или просто сделайте это, используя свой оригинальный JavaScript ...
<div class="row" *ngFor="let lesson of lessons">
<div>
<div class="flex">
<div>
Status: <span [ngClass]="{'red': lesson.status !== 'Complete', 'black': lesson.status === 'Complete' }">{{ lesson.Status }}</span>
</div>
</div>
</div>
</div>