Javascript Angular2：基于HTML表列值比率百分比的动态样式双色div

问候慷慨的帮手。 我我对angular2很幼稚，我确实有要求，我需要显示（两种颜色）div.作为城市传入/传出呼叫数据之间的比率百分比差异。基于两个HTML表格列值之间的差异。。 我们有一张像

城市|来电|外线|呼入/呼出比例

纽约|4500|5600|divs两个彩色条-红色\蓝色--将显示4500和5600呼出值的比率%差异

波士顿|8800|1200|divs双色条>红色\蓝色，将显示8800和1200的呼出值的比率%差异

LA|3400|8800|divs双色条>红色\蓝色，将显示呼出值（即3400和8800）的比率%差异

西雅图|1200|790|divs双色条>红色\蓝色，将显示1200和790的呼出值的比率%差异

---

对不起，如果我不能解释清楚的话…我会找一些东西。。像

.two-colour-bar { 
width: 60px; height: 10px; color: #fff; 
background: -webkit-linear-gradient(left, orange, orange 30%, black 70%, black);

这里的30%，70%将根据输入值（表中的表列..的输入值）进行更改。例如…30%和70%将取决于传入呼叫值（4500）和传出呼叫值（5600）

城市|来电|外线|呼入/呼出比例

纽约|4500|5600|

上面的表格是*ngFor in table INDER INTERNATE INDER HTML.–

[示例外观][1]

<td>
  <div class="progress">
    <div class="fill" [style.width]="incoming / outgoing + '%'">

    </div>
  </div>
</td>

.progress {
  width: 200px;
  height:  20px;
  background-color: red;
  position: relative;
}

.progress .fill{
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: blue;
}

.进展{
宽度：200px；
高度：20px；
背景色：红色；
位置：相对位置；
}
.进步，加油{
位置：绝对位置；
宽度：50%；
身高：100%；
背景颜色：蓝色；
}

什么是“比率百分比差异”确切的意思是？输入和输出之间的比率..基于表值..意味着..首先需要计算这两列值之间的比率..然后我需要红色和蓝色来显示..表列值..我不明白问题是什么。你想要一个公式来计算比率吗？我想我会寻求如何用angul处理这个问题ar2和什么应该是解决这个问题的理想方法…是的..公式也会有帮助…在计算了这个之后，如何显示多色div中的差异…什么是“多色div”。比率是基本的数学。你不需要为此添加

angular2

标记；-）。抱歉，如果我不能解释清楚的话…我会找一些东西。。类似。双色条{宽度：60px；高度：10px；颜色：#fff；背景：-webkit线性渐变（左，橙色，橙色30%，黑色70%，黑色）；但此处30%，70%将根据输入值进行更改..我的表格..城市|传入呼叫|传出呼叫|呼入/呼出呼叫比例纽约| 4500 | 5600 |而上表在HTML内的表格内为*ngFor..以上代码一次只显示一种颜色..相反.我将查看一些东西…双色栏{宽度：60px；高度：10px；颜色：#fff；背景：-webkit线性渐变（左，橙色，橙色30%，黑色70%，黑色）；有解释的图片吗？编辑我的答案。