Angular - переключать класс в динамических c элементах при нажатии - PullRequest
Новая
       86

Angular - переключать класс в динамических c элементах при нажатии

0 голосов
/ 18 июня 2020

Я хочу переключать правильные и неправильные классы, но не могу этого сделать. Логическое значение поступает из массива и при условии, что оно добавляет класс для всех элементов.

Я хочу, красный фоновый класс, когда он находит неправильный ответ, и зеленый класс bg, когда бит ответа в массиве истинен.

Я не могу понять, что я здесь делаю не так. Какие-либо предложения? Рабочая демонстрация: 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');
    }
  }
}

1 Ответ

0 голосов
/ 18 июня 2020

К значениям нужно добавить свойство id. Вы были правы, проверяя item.id == id в условии [class...], но для начала не было свойства id в item. Итак, я назначил случайные идентификаторы от 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

...