为什么这个函数没有运行？

Question

请原谅这里的任何关键术语错误。尽管我的英语很好，但我还是用我的母语学习了编程。我有一个使用 Bootstrap 运行最新版本 Angular 的项目。我不知道这在这里是否有所作为，我真的很困惑。我的组件中有两个独立的模态。其中之一包括一个用于将一些数据注册到我的数据库的表单，并且有一个按钮绑定了一个函数以保存所有数据。它看起来像这样：<div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"  aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <h5 class="modal-title" id="exampleModalLabel">Submit a new task</h5>        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true">&times;</span>        </button>      </div>      <div class="modal-body">        <form [formGroup]="taskForm" class="form-group">           <!-- Form data and whatnot is in here -->        </form>      </div>      <div class="modal-footer">        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>        <input type="button" value="Submit Task" class="btn btn-primary" (onclick)="submitTask()">           <!-- ^^ This button is not running correctly -->      </div>    </div>  </div></div>我的打字稿看起来像这样  submitTask() {    console.log("test");  }它甚至不会登录到控制台。通常当我调用一个没有在我的打字稿组件中声明的函数时，页面不会呈现并返回一个错误，这很好。我尝试将函数的名称更改为不存在的名称，但出于某种原因我没有收到错误。我的 VS Code 控制台出现错误，但页面仍然呈现并且工作正常。我做错了什么是显而易见的吗？或者只是我不能在一个页面上有两个模式，尽管那根本没有意义？

Answer 1

你不在onAngular 组件中使用前缀。所以它看起来像这样（简化）：

<button class="btn btn-primary" (click)="submitTask()">Submit Task</button>

关于事件绑定的文档：https ://angular.io/guide/event-binding

Answer 2

<input type="button" value="Submit Task" class="btn btn-primary" (onclick)="submitTask()">

去掉onclick之间的括号，改成on-click，如<input on-click="submitTask()">.

或者，做(click)="submitTask()"

<button class="btn btn-primary" (click)="submitTask()">Submit Task</button>

请参阅事件绑定文档