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

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&nbsp;class="btn&nbsp;btn-primary"&nbsp;(click)="submitTask()">Submit&nbsp;Task</button>关于事件绑定的文档：https ://angular.io/guide/event-binding

Answer 2

<input&nbsp;type="button"&nbsp;value="Submit&nbsp;Task"&nbsp;class="btn&nbsp;btn-primary"&nbsp;(onclick)="submitTask()">去掉onclick之间的括号，改成on-click，如<input on-click="submitTask()">.或者，做(click)="submitTask()"<button&nbsp;class="btn&nbsp;btn-primary"&nbsp;(click)="submitTask()">Submit&nbsp;Task</button>请参阅事件绑定文档