Question

所以我是一个真正的初学者，显然我缺少一些东西。我正在创建一个测验样式的应用程序，并且有一个带有广播组的列表，该列表中使用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和许多链接的资料，但我无法完全理解。道歉，如果这是一个非常愚蠢的问题，或者我没有正确回答

Answer 1

之所以发生这种情况，是因为您只有一个answerColor变量，而该变量所有都在使用，而不是每个{em> 1 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

离子根据if语句ngStyle和ngFor

1 个答案: