Ionic Изменить цвет элемента на основе операторов if ngStyle и ngFor - PullRequest
Новая
       18

Ionic Изменить цвет элемента на основе операторов if ngStyle и ngFor

0 голосов
/ 06 ноября 2018

Так что я настоящий новичок, и мне явно чего-то не хватает. Я создаю приложение в стиле викторины, и у меня есть список с радиогруппой, которая перебирает массив, используя 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>

ц 

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

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

Так что ошибок нет, просто весь список становится зеленым или красным в зависимости от ответа, тогда как я просто хочу, чтобы элемент, на который я щелкаю, менял цвет.

Я прочитал множество материалов о ng-классе и множество ссылок, но не могу понять, как это сделать. Извиняюсь, если это действительно тупой вопрос или я все неправильно поняла

1 Ответ

0 голосов
/ 06 ноября 2018

Это происходит потому, что у вас есть только одна переменная 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!
}
...