如何在离子 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'"