如何在 ionic 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"

当我运行这个时，我得到以下错误：

Error: Cannot find a differ supporting object 'colorA'

所以我猜问题出在这里：'color'+answer.option".

你能帮帮我吗？

Answer 1

不要将字符串传递给 [ngStyle]，传递对象即可：

在您的情况下，您可以编写一个 return 像这样的颜色对象的函数。

[ngStyle]=" answer.is_correct ? 正确：getColor()"

getColor(){

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

如果你想使用 string ，你可以使用 ngClass 指令

Answer 2

我在 stackblitz 上为您的应用制作了一个简单版本，以展示您要完成的任务（代码位于 pages/home 文件夹中）： https://stackblitz.com/edit/quiz-ionic-bztlxs

当您点击卡片时，我将答案 "selected" 设置为真：

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

我在 ngStyle 上调用 getColor(answer) 并使用 selected 属性定义返回的颜色：

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

这是我的卡片循环：

<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>

编辑：我刚刚意识到我忘记了绿色选择，但我相信你知道如何做到这一点。

如何在 ionic ngStyle 中连接变量？

How to concatenate a variable in ionic ngStyle?

angular

ionic4