计算模块使用2路数据绑定无需任何点击

Question

我为一家公司开始了一个新的 Web 项目，并决定使用 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 中，这不是一个好的解决方案！事实上，如果计算这么简单，它可能没问题，但我需要在金额方面添加一些条件。

告诉我这是否不是最佳做法 但在我看来，我需要做的是在我的simulation.component.ts 这将进行计算并在我的 p 应答器中调用它。

我知道可以通过单击按钮来调用函数，但他们要求我将其设为 100% 动态，他们只希望在用户每次修改输入时应用该函数。

所以我想到了 <p>{{calcul()}} 在我的 simulation.component.ts 文件

中有一个 calcul() 函数

import { Component, Input, Output,EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'app-simulation',
  templateUrl: './simulation.component.html',
  styleUrls: ['./simulation.component.scss']
})

export class SimulationComponent implements OnInit {

   @Input() chiffreAffaire: number ;

  calcule()
  {
    this.chiffreAffaire = this.chiffreAffaire*2;
  }
  constructor() { }

  ngOnInit() {
  }

}

但这显然行不通。

Answer 1

如果我对你的理解是正确的，你需要在你的输入中添加一个（更改）函数或者分解你的 ng 模型

在此处查看此回复：

计算模块使用2路数据绑定无需任何点击

Calculation module using 2 way data binding without any click

angular

data-binding

angular-cli

2-way-object-databinding