角度2中的数字验证

Question

Angular 2（2.0.0）+ TS。

我必须在表格列中使用<input>标记设置验证规则。

对于示例，我有一些表和输入：

<table>
   <tr>
     <td>Values: {{ dataFromServer }}</td>
   </tr>
</table>
<input type="number" placeholder="maxvalue">
<input type="number" placeholder="minvalue">

dataFromServer是一个值，我从服务器获取，并且等于255。

我添加maxvalue = 100和minvalue = 20，然后Values: 255变红了。怎么实现这个？或者请给我一些有趣的例子。

Answer 1

像这样改变你的HTML代码

<table>
   <tr>
      <td ng-class="{'colorRed': dataFromServer > maxvalue || dataFromServer < minvalue }">Values: {{ dataFromServer }}</td>
   </tr>
</table>
<input type="number" placeholder="maxvalue" ng-model="maxvalue">
<input type="number" placeholder="minvalue" ng-model="minvalue">

添加css，如

.colorRed {
    color:red;
}