比较Html表中的表数据行，并在问答应用程序中找到具体答案
比较Html表中的表数据行，并在问答应用程序中找到具体答案
提问于 2019-08-20 12:49:38
我希望将所有行与特定行进行比较，并突出显示边框：
<table *ngFor="let Question from Questions| paginate: { itemsPerPage: 1, currentPage: p }">
<tr><td>emp.question</td></tr>
<tr><td>emp.option1</td></tr>
<tr><td>emp.option2</td></tr>
<tr><td>emp.option3</td></tr>
<tr><td>emp.option4</td></tr>
<tr><td>Emp.rightAnswer</td></tr>
</table>如果选中的选项等于rightAnswer，则突出显示tr边框为绿色，否则为安全选项边框红色。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-20 16:52:01
在编辑之前，我的最后一个答案被删除了，这是我的完整答案。
请参阅下面的链接，以获得一行的高亮显示。
https://ciphertrick.com/highlight-selected-row-in-ngfor-angular-2/
编辑：
我介绍了两个新的类: correctAnswer，wrongAnswer。
.table td.correctAnswer {
background-color:green !important;
color: white;
}
.table td.wrongAnswer {
background-color:red !important;
color: white;
}然后为问题的选项添加了两个属性: isSelected和isCorrectAnswser
Questions = [{
question : "Question 1",
options : [
{ option : "Q1-Option 1", isSelected : false , isCorrectAnswer : true},
{ option : "Q1-Option 2", isSelected : false , isCorrectAnswer : false},
{ option : "Q1-Option 3", isSelected : false , isCorrectAnswer : false},
{ option : "Q1-Option 4", isSelected : false , isCorrectAnswer : false},
]
}]然后为correctAnswer和wrongAnswer添加了一个角指令类，并为更新isSelected值的选项添加了一个单击函数。
setClickedRow = function(option){
option.isSelected = !option.isSelected;
}<table class="table table-hover table-sm">
<tr *ngFor="let q of Questions">
<td>{{q.question}}</td>
<td *ngFor="let o of q.options" (click)="setClickedRow(o)"
[class.correctAnswer]= "o.isSelected && o.isCorrectAnswer"
[class.wrongAnswer] = "o.isSelected && !o.isCorrectAnswer"
>
{{o.option}}
</td>
</tr>
</table>您可以在这里找到一个演示：https://stackblitz.com/edit/angular-uyeq5y
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57574095
复制相关文章
相似问题
腾讯云开发者
