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

请原谅这里的任何关键术语错误。尽管我的英语很好，但我还是用我的母语学习了编程

我有一个项目运行Angular的最新版本，使用Bootstrap。我不知道这对这里是否有影响，我真的很困惑

我的组件中有两个独立的模态。其中一个包括一个表单，用于将一些数据注册到my DB，并且有一个按钮，该按钮绑定了一个函数，用于保存所有数据。它看起来像这样：

<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>

它甚至不会登录到控制台。通常，当我调用typescript组件中未声明的函数时，页面不会呈现并返回错误，这很好。我尝试将函数的名称更改为不存在的名称，但由于某些原因，我没有收到错误。我的VS代码控制台出现了一个错误，但是页面仍然呈现并工作良好。我做错了什么显而易见的事吗？或者只是我不能在一个页面上有两个情态动词，尽管这毫无意义

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

---

请参阅

在角度分量中不使用上的前缀。 所以它看起来像这样（简化）：

提交任务

---

关于事件绑定的文档：

尝试使用（单击）事件。尝试使用（单击）

引用并正确使用事件绑定顺便说一句：对于按钮使用HTML原生

按钮

标记几乎是一种最佳做法。这就是为什么我把它放在我的答案里。

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

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

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