Html 不要使用按钮激活脚本，而是在输入时自动加载脚本

我正在玩angular并制作了一个小型计算器web应用程序，我有以下app.component.html

---

这很好，当我点击calculate（计算）按钮时，用户输入的两个数字被加在一起，然而，有没有一种方法可以跳过整个按钮，在用户想要添加的两个数字被输入后，只需加载总和

我认为这是您在前面的问题中尝试实现的示例，然后删除了该示例

您已经创建了一个计算器组件。现在，如果要在其中显示结果，则必须将数字作为输入属性传入。所以看起来是这样的：

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "calculator",
  templateUrl: "./calculator.component.html",
  styleUrls: ["./calculator.component.css"]
})
export class CalculatorComponent implements OnInit {
  @Input() firstNumber: number;
  @Input() secondNumber: number;

  constructor() {}

  ngOnInit() {}
}

<div id="first_number">
    <h3>First Number</h3>
    <input [(ngModel)]="firstNumber" type="number">
</div>

<div id="second_number">
  <h3> Second Number</h3>
  <input [(ngModel)]="secondNumber" type="number">
</div>

<div id="solution">
  <h3> Solution: </h3>
  <calculator 
    [firstNumber]="firstNumber"
    [secondNumber]="secondNumber">
  </calculator>
</div>

然后，当两个数字都可用时，基本上可以在模板中打印结果：

<p *ngIf="firstNumber && secondNumber; else elseBlock">
{{ firstNumber + secondNumber }}
</p>
<ng-template #elseBlock>
  Please provide both inputs
</ng-template>

firstNumber和secondNumber是组件类中的属性：

firstNumber: number = null;
secondNumber: number = null;

更新： 您还可以将计算器组件的模板放在AppComponent的模板中。这样，您就不必真正强调@Input属性：

<div id="first_number">
    <h3>First Number</h3>
    <input [(ngModel)]="firstNumber" type="number">
</div>

<div id="second_number">
  <h3> Second Number</h3>
  <input [(ngModel)]="secondNumber" type="number">
</div>

<div>
  <h3>Without Calculator</h3>
  <p *ngIf="firstNumber && secondNumber; else elseBlock">
  {{ firstNumber + secondNumber }}
  </p>
  <ng-template #elseBlock>
    Please provide both inputs
  </ng-template>
</div>

这是给你的裁判的一封信

---

是的，但在我第一次尝试的时候有严重的基本缺陷，所以我回去读了一些书，并尝试了一下again@Banani720是 啊我注意到了。这个答案只会给你一个更好的心理模型，让你知道在这个有棱角的世界里，事情是如何运作的。这个答案有你可以遵循的两种方法。更新后的方法将适合您的用例：希望答案能有所帮助。嘿@SiddAjmera，首先，我为迟来的回复道歉。我一直在深入研究你的答案，以帮助我进一步了解发生的事情的细微差别。当我尝试将表单设置为文本时，如果表单被指定给类型编号，那么答案非常有用，计算器似乎将数字连接为字符串，我是否可以使用某种过滤器将文本条目的值从字符串更改为整数？我特别提到了这些输入的类型作为数字，以避免首先出现这个问题。但是您可以这样做：{{+firstNumber++secondNumber}}我刚刚在firstNumber和lastNumber属性之前添加了一个+符号，以将它们转换为数字。这样就不会将输入串接为字符串。在一个更实际的用例中，如果用户输入的是字符串而不是数字，您将检查输入本身是否出错。感谢您，我希望将其作为文本来执行的主要原因是，如果其中一个数字字段保留为零，它仍然会显示提示用户使用这两个输入的错误，但将表单作为文本字段似乎已经解决了这一问题，正如我所假设的那样。

firstNumber: number = null;
secondNumber: number = null;

<div id="first_number">
    <h3>First Number</h3>
    <input [(ngModel)]="firstNumber" type="number">
</div>

<div id="second_number">
  <h3> Second Number</h3>
  <input [(ngModel)]="secondNumber" type="number">
</div>

<div>
  <h3>Without Calculator</h3>
  <p *ngIf="firstNumber && secondNumber; else elseBlock">
  {{ firstNumber + secondNumber }}
  </p>
  <ng-template #elseBlock>
    Please provide both inputs
  </ng-template>
</div>