Как объединить переменную в ioni c ngStyle?

Question

Я пытаюсь создать приложение для викторины просто для удовольствия.

Но я не могу динамически изменить фон. Таким образом, в основном, на каждый вопрос у меня есть 5 ответов (a, b, c, d, e).

Если я выберу правильный ответ, установите зеленый фон карты. Если я выбрал неправильный ответ, установите красный фон карточки и установите зеленый цвет фона правильного ответа.

. html

<ion-card *ngFor="let answer of question.answers" tappable (click)="chooseAnswer(answer)" [ngStyle]="answer.is_correct ? correct : 'color'+answer.option">
    <ion-card-content class="card__content">
        <ion-row>
            <ion-col size="2" style="padding: 0;">
                <div class="option__wrapper">
                    <p class="answer__option">{{answer.option}}</p>
                </div>
            </ion-col>
            <ion-col size="10" style="padding: 0; margin: auto;">
                <p style="text-align: left; margin: 0;" [innerHTML]="answer.description"></p>
            </ion-col>
        </ion-row>
    </ion-card-content>
</ion-card>

.ts

chooseAnswer(answer) {
    //wrong answer
    if (!answer.is_correct) {
        switch (answer.option) {
            case "A":
                this.colorA  = {
                    'background':  'red',
                }
                break;
            case "B":
                this.colorB  = {
                    'background':  'red',
                }
                break;
            case "C":
                this.colorC  = {
                    'background':  'red',
                }
                break;
            case "D":
                this.colorD  = {
                    'background':  'red',
                }
                break;
            case "E":
                this.colorE  = {
                    'background':  'red',
                }
                break;
        }
    }
    // set the correct background as green
    this.correct = {
        'background':  '#00e676',
    }
}

Но когда я не могу объединить переменную в ngStyle:

[ngStyle] = "answer.is_correct? Correct: 'color '+ answer.option "

Когда я запускаю это, я получаю следующую ошибку:

Ошибка: не удается найти другой поддерживающий объект' colorA '

Итак, проблема здесь, я думаю: 'color' + answer.option ".

Не могли бы вы мне помочь?

Answer 1

Не передавайте строку в [ngStyle], передавайте объект, и он будет работать:

В вашем случае вы можете написать функцию, которая возвращает цветовой объект следующим образом.

[ngStyle] = "answer.is_correct? correct: getColor ()"

getColor(){

 // in this method , you have to write the logic to return the color object
}

, если вы хотите использовать строку, вы можете использовать директиву ngClass

Answer 2

Я сделал простую версию вашего приложения на stackblitz, чтобы продемонстрировать, что вы пытаетесь выполнить sh (код находится в pages / home folder): https://stackblitz.com/edit/quiz-ionic-bztlxs

Я установил ответ «выбран» в значение «истина» при нажатии на карточку:

  chooseAnswer(answer) {
    answer.selected = true;    
  }

Я вызываю getColor (answer) для ngStyle и использую выбранный атрибут, чтобы определить, какой цвет будет возвращен:

getColor(answer) {
    if (answer.selected)
        return { 'background-color': answer.isCorrect ? 'green' : 'red' };
    else
        return;
}

Это моя карта. L oop:

<ion-card *ngFor="let answer of question.answers" tappable (click)="chooseAnswer(answer)" [ngStyle]="getColor(answer)">
    <ion-card-content class="card__content">
        <ion-row>
            <ion-col size="2" style="padding: 0;">
                <div class="option__wrapper">
                    <p class="answer__option">{{answer.option}}</p>
                </div>
            </ion-col>
            <ion-col size="10" style="padding: 0; margin: auto;">
                <p style="text-align: left; margin: 0;" [innerHTML]="answer.description"></p>
            </ion-col>
        </ion-row>
    </ion-card-content>
</ion-card>

Редактировать: Я только что понял, что забыл про зеленый выбор, но я уверен, что вы поняли, как это сделать.