Angular

Question

我想切换是非class但是做不到。布尔值来自数组，条件是它在所有元素上添加 class。

我想要，红色背景 class 当它发现错误答案时绿色背景 class 当数组中的答案位为真时。

我不知道我做错了什么。有什么建议么？工作演示：https://stackblitz.com/edit/angular-ivy-4yczgp

HTML

<div class="question-row custom-block-question" *ngFor="let item of qblock.options;let j = index"
             (click)="validateAnswer(item)"
             [class.post-correct-answer]="item.id == id && rightMcq"
             [class.post-wrong-answer]="item.id == id && wrongMcq">
          <div class="option-wrapper">
            <div class="qitem">

              <div class="qitembox">{{ item.optionLabel }}</div>
            </div>
            <div class="qitem-text">
              <div class="qitem-textbox">
                <p>
                  {{ item.optionText }}
                </p>
              </div>
            </div>
          </div>
        </div>

TS

validateAnswer(item) {
    this.id = 0;
    this.wrongMcq = false;
    this.rightMcq = false;
    console.log('clicked', item);
    if (item.optionActive === true) {
      this.id = item.id;
      this.wrongMcq = false;
      this.rightMcq = true;
      console.log('this is true');
    } else {
      this.id = item.id;
      this.wrongMcq = true;
      this.rightMcq = false;
      console.log('This is false option');
    }
  }
}

Answer 1

您需要将 id 属性添加到值中。您检查 [class...] 条件中的 item.id == id 是正确的，但是 item 中没有 id 属性开始。所以我分配了随机 ID 1 到 8。

尝试以下方法

this.practiceQuizData = [
  {
    index: 4,
    questionType: 1,
    questionNumber: 'Question 1',
    questionText:
      'Question 2',
    options: [
      {
        optionLabel: 'A',
        optionText: 'Option A',
        optionActive: false,
        id: 1
      },
      {
        optionLabel: 'B',
        optionText: 'Option B',
        optionActive: false,
        id: 2
      },
      {
        optionLabel: 'C',
        optionText: 'Option C',
        optionActive: false,
        id: 3
      },
      {
        optionLabel: 'D',
        optionText: 'Option D',
        optionActive: true,
        id: 4
      },
    ],
  },
  {
    index: 5,
    questionType: 1,
    questionNumber: 'Question 2',
    questionText:
      'Question 2',
    options: [
      {
        optionLabel: 'A',
        optionText: 'Option A',
        optionActive: true,
        id: 5
      },
      {
        optionLabel: 'B',
        optionText: 'Option B',
        optionActive: false,
        id: 6
      },
      {
        optionLabel: 'C',
        optionText: 'Option C',
        optionActive: true,
        id: 7
      },
      {
        optionLabel: 'D',
        optionText: 'Option D',
        optionActive: false,
        id: 8
      },
    ],
  },
];

我修改了你的Stackblitz

Angular - 单击时在动态元素中切换 class

Angular - toggle class in dynamic elements on click

dom

click

dom-events