javascript - Varför körs inte denna funktion?

Vänligen ursäkta eventuella fel i nyckeltermer här. Även om jag har bra engelska lärde jag mig programmering på mitt modersmål.

Jag har ett projekt som kör den senaste versionen av Angular, med Bootstrap. Jag vet inte om det gör någon skillnad här eller inte, jag är verkligen förvirrad.

Jag har två separata modaler i min komponent. En av dem inkluderar ett formulär för att registrera viss data till min databas och har en knapp med en funktion kopplad till den för att spara all data. Det ser ungefär ut så här:

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

Min typescript ser ut så här

  submitTask() {
    console.log("test");
  }

Det loggas inte ens till konsolen. Vanligtvis när jag kallar en funktion som inte är deklarerad i min TypeScript-komponent, så kommer sidan inte att renderas och ett felmeddelande visas, vilket är okej. Jag försökte ändra namnet på funktionen till något som inte existerade, och av någon anledning fick jag inget fel. Jag fick ett fel i min VS Code-konsol, men sidan renderades fortfarande och fungerade utan problem. Gör jag något fel som är uppenbart? Eller är det bara så att jag inte kan ha två modaler på en sida, även om det inte alls verkar logiskt?

Svar #1

Du använder inte prefixet on i Angular-komponenter. Så det skulle se ut så här (förenklat):

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

Dokumentation om händelsebindning: https://angular.io/guide/event-binding

Svar #2

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

Ta bort parentesen mellan onclick och ändra den till on-click som i <input on-click="submitTask()">.

alternativt, gör (click)="submitTask()"

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

Se dokumentationen för händelsebindning

Relaterade artiklar