时间戳

首页 > 解决方案 > Ionic 根据 if 语句 ngStyle 和 ngFor 更改项目的颜色

angular - Ionic 根据 if 语句 ngStyle 和 ngFor 更改项目的颜色

问题描述

所以我是一个真正的初学者，我显然错过了一些东西。我正在创建一个测验风格的应用程序，并且我有一个带有无线电组的列表，该列表使用 ngfor 循环通过一个数组来呈现答案

该列表是一个答案列表，我要做的是在他们单击它时更改项目的颜色，即绿色表示正确，红色表示不正确。

它有效，但问题是它改变了整个列表（即每个项目，而不仅仅是我点击的项目）

这是我的代码

html

<button ion-item  *ngFor="let answer of question.answers; let i = index ;"  [ngStyle]="{'background-color': answerColor}"  wrap-text>

    <ion-label  class="my-label" text-wrap>{{answer.answer}}</ion-label>
    <ion-radio  (click)="selectAnswer(answer, question)" [checked]="answer.selected" [disabled]="hasAnswered"></ion-radio>

</button>

ts

    if(answer.correct){
        this.score++;
        this.answerColor = '#025c25'; //correct Green Color

    }
    else{
        this.answerColor = '#AB2020'; //Wrong Red Color
    }
    this.slides.lockSwipes(false);

所以没有错误，它只是根据答案使整个列表变为绿色或红色，而我只希望我点击的项目改变颜色。

我已经阅读了大量关于 ng-class 的内容和大量链接，但我无法完全理解它。抱歉，如果这是一个非常愚蠢的问题，或者我的方法都错了

标签： angularionic-frameworkngforng-style

解决方案

发生这种情况是因为您只有一个answerColor变量供所有答案使用，而不是answerColor 每个 answer.

如果您可以向answer对象添加颜色变量并将代码更改为使用answer.answerColor而不是this.answerColor，那么颜色应该可以按预期工作。在以下代码段中，我已更新您的逻辑以使用answer.answerColor.

if(answer.correct){
    this.score++;
    answer.answerColor = '#025c25'; //correct Green Color
}
else{
    answer.answerColor = '#AB2020'; //Wrong Red Color
}

最后，如果您的answer对象被声明为特定类型（而不是any），那么您可能需要更新类型定义。

export interface Answer {
    correct: boolean
    selected: boolean;
    answer: string;
    color: string; // Add this line!
}

推荐阅读