Why this condition is always true?

Question

quiz.html

<ul *ngFor="let q of categoryid;">
<li colspan="4">
    <strong>Q.No. {{q.questionId}}</strong>  
    {{q.questionName}} 
</li>
<li>
    <ul *ngFor="let o of q.options; let i = index" 
        (click)="selectedIndex = (i+q.questionId)">
        <div>
           <li 
              [ngClass]="{correctAnswer: o.Ans && selectedIndex===(i + q.questionId),
                          wrongAnswer: !o.Ans && selectedIndex===(i+q.questionId)}">
               <strong>{{o.Ans}}</strong>  {{o.optionName}}
           </li>
        </div>
      </ul>
    </li>
 </ul>

firebase database is look like this

correctAnswer class is always true . Why?

Answer 1

"false" string is actually treated as a true boolean expression, see https://developer.mozilla.org/en-US/docs/Glossary/Falsy

In order to fix this you either have to provide a boolean value to your o object ({Ans: false} instead of {Ans: "false"}) or run a different check like this: o.Ans === "true". You might also consider using type conversion equality check like o.Ans == true but I wouldn't recommend this approach.

Answer 2

Your class name should be in single quotes and put condition statements into brackets:

<li
   [ngClass]="{'correctAnswer': (o.Ans && selectedIndex === (i + q.questionId)),
               'wrongAnswer': (!o.Ans && selectedIndex === (i+q.questionId)})">
   <strong>{{o.Ans}}</strong>  {{o.optionName}}
</li>

or you can use ternary operator ? :

<li
   [ngClass]="(o.Ans && selectedIndex === (i + q.questionId)) ? 'correctAnswer' : 'wrongAnswer'">
   <strong>{{o.Ans}}</strong>  
   {{o.optionName}}
</li>

In addition, you can show debug info in your HTML and see how expression is evaluated:

<p>(o.Ans && selectedIndex === (i + q.questionId)) is 
    {{ (o.Ans && selectedIndex === (i + q.questionId)) }}</p> 

<p>(!o.Ans && selectedIndex === (i+q.questionId)}) is 
    (!o.Ans && selectedIndex === (i+q.questionId)})</p>