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 и много ссылок, но не могу понять это. Приносим извинения, если это действительно глупый вопрос или я подошел ко всему неправильно


ionic-framework angular ngfor ng-style
person FrodoBaggins    schedule 06.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это происходит потому, что у вас есть только одна 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!
}
person Wrokar    schedule 06.11.2018
comment
Спасибо за быстрый ответ. Это имеет логический смысл, но когда вы говорите добавить переменную цвета к объектам ответа, я немного теряюсь. Извините, я новичок и, возможно, у меня нет предыстории - person FrodoBaggins; 06.11.2018
comment
Я обновил свой ответ, чтобы предоставить дополнительную информацию. Надеюсь, это поможет! - person Wrokar; 06.11.2018
comment
Хорошо, спасибо, теперь я понимаю, что ты имеешь в виду. Моя проблема заключалась в том, что я просто использовал большой файл JSON без создания модели. Мне всегда было интересно, почему использовались модели по сравнению с использованием необработанных данных, я думаю, это отвечает на вопрос. - person FrodoBaggins; 07.11.2018