这个场景的优雅数据绑定设计是什么?

时间:2017-12-10 19:43:24

标签: angular

我有一个如下所示的对象结构:

var change = 
{
   quarters:1
   nickles:2
   dimes:3
}

此对象应显示在html中,如下所示:

Change is 1 quarter, 2 nickles, 3 dimes

如果特定硬币计数为0,则不应将其包含在消息中。在ng2 +中实现这一点最优雅的方法是什么?

1 个答案:

答案 0 :(得分:1)

调用HTML文件中的函数,该函数返回所需格式的更改:

 <div [innerHTML]="getChange()"></div>

在你的ts文件中,你编写了一个函数,它返回你想要的格式的变化:

getChange(){
  return "Change is "+((change.quarters == 0) ? "" : change.quarters+" quarters, ")+((change.nickles == 0) ? "" : change.nickles+" nickles, ")+((change.dimes == 0) ? "" : change.dimes+" dimes ");
}

要检查其中一个变量是否为0并且为了省去编写几个if语句的麻烦,我建议使用三元运算符(条件)? (然后):(其他)