Question

我为一家公司开始了一个新的网络项目，并决定使用Angular Cli。

他们需要的是一个计算模块，以帮助客户计算他们的潜在薪水。

所以我创建了一个带有简单视图的simulation组件（一个带有3个输入的表单）。

以下是simulation.component.html的一部分，其中包含我的3个输入和2个数据绑定 ，其中包含 。计算已经过度简化，但我稍后会对它们进行调整。

<div class="container">
<form>
    <div class="row">
      <div class="col-lg-6">
        <div class="md-form">
          <input [(ngModel)]= "chiffreAffaire" mdbActive type="number" id="form1" class="form-control" [ngModelOptions]="{standalone: true}">
          <label for="form1" class="">Chiffre d'affaire Hors tax (Mensuel)</label>
        </div>
      </div>
    </div>

<p> CA : {{chiffreAffaire}}</p>
<p> RESULT : {{chiffreAffaire*2}}</p>

就像你可以看到我将我的计算直接放在我的HTML Balise中，这不是一个好的解决方案！事实上，如果计算结果如此简单，那么可能没问题，但我需要在金额方面添加一些条件。

告诉我它是不是最佳做法 ，但在我看来，我需要做的是在{{1}中添加一个功能这将进行计算并在我的simulation.component.ts应答中调用它。

我知道可以通过点击一个按钮调用一个函数，但是他们让我让它100％动态，他们只是希望每次用户修改输入时都应用该函数。 / p>

所以我在我的p文件中考虑了<p>{{calcul()}} calcul()函数的内容

simulation.component.ts

但它显然不起作用。

Answer 1

如果我理解正确，您需要在输入中添加（更改）功能或打破您的ng模型

在这里看看这个回复：

onchange equivalent in angular2

计算模块使用双向数据绑定而无需任何单击

1 个答案: