如何解决如何在离子 5 中使用具有多个条件的 ng-class
我创建了使用离子和角度的测验应用程序,我想在用户选择正确的答案时按钮应该改变为绿色,然后选择错误的答案时,按钮应该更改为红色并显示绿色的正确答案。下面是我的代码 测验.html
choice(ans,qn) {
this.selectedItem = ans.choice
if (this.selectedItem.toString().replace(/\s/g,"") == qn.corect.toString().replace(/\s/g,"")) {
console.log('corect');
this.incrimentscore()
this.textToSpeech.speak({
text: 'corect Answer.',locale: 'en-US',rate: 0.7
})
.then(() =>
console.log('Done')
)
.catch((reason: any) =>
console.log(reason)
);
} else {
// console.log('wrong')
this.textToSpeech.speak({
text: 'your wrong',// +qn.corect
locale: 'en-US',rate: 0.7
})
.then(() =>
console.log('Done')
)
.catch((reason: any) =>
console.log(reason)
);
}
这是测验.ts
<table class="table-size-qty">
<thead>
<tr>
<th scope="col">Size</th>
<th scope="col">Qty</th>
</tr>
{rows.map((r) => (
<tr>
<td><input className="no-style" name={'size'+r} type="text"></input></td>
<td><input className="no-style" name={'qty'+r} type="number"></input></td>
</tr>
))}
</thead>
</table>
<button type='button' class="buttonAddRow" onClick={addRow}>Add row</button>
}
解决方法
[ngClass]="{'className': condition,'className': condition,'className': condition}"
其他选项
[ngClass]="Condition ? 'className' : Condition ? 'className' : Condition ? 'className' : 'defaultclassName'"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。