Question

因此，我一直在研究angular，并学习了使用“ ngModel”进行双向绑定的方法。我有这个主意，但是我似乎无法实现，希望对此有所帮助：

我想做的事情：因此，我将有一个输入字段，其中包含“成人”的机票价格，以及类似的“儿童”机票价格。我还有另外两个输入字段，它们将根据固定汇率来计算门票价格。然后，我要在第三个字段中打印两个计算出的价格之和。到目前为止，我已经尝试过了，但是现在不知道该怎么办。任何帮助将不胜感激，谢谢！

代码如下：

<input type="text" [(ngModel)]="ticket.adult" name="adult">
<input type="text" value="{{ ticket.adult*15 }}">

<input type="text" [(ngModel)]="ticket.child" name="child">
<input type="text" value="{{ ticket.child*5 }}">


<p>Ticket Price:<!--the total price will be displayed here--></p>

P.S-我已经在其component.ts文件中声明了一个票证对象。

Answer 1

也许可行：

get sum(): number {
  // calculate your price with your formula here, 
  return this.ticket.adult*15 + this.ticket.child*5;
}

在您的模板中：

<p>Ticket Price: {{sum}}</p>

在.ts文件中，您只需调用sum

即可访问this.sum

演示：https://stackblitz.com/edit/angular-lmjyts?file=src/app/app.component.ts

Answer 2

正如JBNizet所说，出于语义和功能上的原因，您应该避免使用<input>来显示输出。因此，您可以像这样重写代码：

<input type="text" [(ngModel)]="ticket.adult" name="adult">
<p>{{ ticket.adult*15 }}</p>

<input type="text" [(ngModel)]="ticket.child" name="child">
<p>{{ ticket.child*5 }}</p>


<p>Ticket Price: {{ ticket.adult * 15 + ticket.child * 5 }}</p>

但是，您可能希望避免多次重写成人/儿童乘法器，只是为了避免重复以及万一它们发生更改。在这种情况下，我建议的解决方案是使用管道，因为您的计算是确定性的。

@Pipe({ name: 'price' })
export class PricePipe implements PipeTransform {
  transform(amount, type) {
    let multiplier = 0; // perhaps throw an error or set a sane default
    switch (type) {
      case 'adult':
        multiplier = 15;
      case 'child':
        multiplier = 5;
    }

    return amount * multiplier;
  }
}

现在，您可以像这样使用它：

<input type="text" [(ngModel)]="ticket.adult" name="adult">
<p>{{ ticket.adult | price:'adult' }}</p>

<input type="text" [(ngModel)]="ticket.child" name="child">
<p>{{ ticket.child | price:'child' }}</p>


<p>Ticket Price: {{ (ticket.adult | price:'adult') + (ticket.child | price:'child') }}</p>

现在，您可以将乘法器放在一个位置，甚至在以后需要时添加其他种类的乘法器。您甚至可以重构代码以遍历'adult'和'child'属性以显示价格，而不是对.adult和.child值进行硬编码。

在超过两个字段的Angular中进行双向绑定

2 个答案: