संपादित करें: https://stackblitz.com/edit/angular-uhuwie

मुझे मैट-रेडियो-बटन की एक विशेष पंक्ति को हाइलाइट करने में कठिनाई हो रही है। ऐसा लगता है कि सही विकल्प चुने जाने पर सभी पंक्तियों को हाइलाइट किया जा रहा है। यदि चयनित पंक्ति सही उत्तर से मेल खाती है, तो केवल उस पंक्ति को हरे रंग में हाइलाइट किया जाना चाहिए, अन्यथा लाल रंग को हाइलाइट करें। मुझे प्रति पृष्ठ एक प्रश्न दिखाने की भी आवश्यकता है और स्पष्टीकरण को उस स्थान पर ले जाना है जहां उत्तर दिखाया गया है। मेरा कोड नीचे है:

<div *ngFor="let option of question.options">
  <div class="form-group">
    <mat-radio-group class="form-control" formControlName="answer" name="answer" (change)="radioChange($event)">
      <div [style.backgroundColor]="selectedRadioOption === question.correctAnswer ? '#00c853': 'ff0000'">
        <mat-radio-button color="primary" name="radio-group" [value]="option.optionValue" (click)="validate(answer)">
          <label>{{ option.optionText }}</label>
        </mat-radio-button>
      </div>
    </mat-radio-group>
  </div>
</div>
0
integral100x 14 सितंबर 2019, 18:02

1 उत्तर

सबसे बढ़िया उत्तर

आपको यह जांचना होगा कि क्या विकल्प भी चयनित विकल्प के समान ही है।

<div *ngFor="let option of question.options">
  <div class="form-group">
    <mat-radio-group class="form-control" formControlName="answer" name="answer" (change)="radioChange($event)">
      <div 
        [style.backgroundColor]=
            "selectedRadioOption === question.correctAnswer &&
             selectedRadioOption === option.optionValue
             ? '#00c853': 'ff0000'">
        <mat-radio-button color="primary" name="radio-group" [value]="option.optionValue" (click)="validate(answer)">
          <label>{{ option.optionText }}</label>
        </mat-radio-button>
      </div>
    </mat-radio-group>
  </div>
</div>
1
Andrew Allen 14 सितंबर 2019, 16:13