javascript - Angular 17 knapp (click) händelse fungerar inte

Jag har en knapp som borde kalla en funktion fun(). Av någon anledning fungerar inte händelsen alls. Här är koden: TS-fil:

  fun(): void {
    this.test = 'You are my hero!';
    alert('hello')
  }

Och HTML:

<button type="button" (click)="fun()">Click me!</button>

Jag har ingen aning om vad jag gör fel. Snälla hjälp mig.

Svar #1

Med tanke på den breda omfattningen av denna fråga är den enda vägen att felsöka, felsöka och felsöka. Här är några tester jag rekommenderar att du provar:
  1. Testa andra händelser: Är click-händelsen den enda som misslyckas?
  2. Försök binda vanliga JS-händelser: Fungerar de?
  3. Prova Chrome Developer Tools för att övervaka händelser, där kan du se alla bundna händelser och det kan ge dig en ledtråd om var du bör titta.
  4. Kontrollera om det finns dubbletter av händelser, variabler och funktioner, kanske några av dem kolliderar med varandra. Det kan förhindra att korrekt kod körs.
  5. Försök byta din händelseexekvering från en TypeScript-metod till en funktion, det kan ge dig några ledtrådar:
public thisIsAnAngularMethod(): void { ... }
public thisIsAFunction = () => { ... }
  1. Använd Chrome för att automatiskt pausa vid fel, ibland "sväljer" Angular undantag och döljer problem. Om det är fallet kanske det faktiska felet inte kastas så att du kan se det (exempel på fel som sväljs av Angular: här, här och här)
  2. Kör ng test --browsers ChromeDebug och kontrollera om grundläggande test fungerar, om du har fler tester kan det vara klokt att ta bort dem tillfälligt, alla dina tester bör åtminstone kunna köra "should create" testet:
it('should create', () => {
    expect(component).toBeTruthy();
});

För rekommendationerna 1 och 2 kan du åtminstone prova följande händelser: focus, blur, mousedown, mouseup och mouseover.

Observera att majoriteten av mitt svar gäller vanlig JavaScript och inte Angular TypeScript, det är medvetet eftersom Angular-komponenter körs som JS. Glöm inte att kolla länkarna.

Svar #2

Din kod verkar fungera bra. Om du har problem med att arbeta, se den fungerande stackblitz nedan.

Kolla på detta fungerande kodexempel:

Vänligen hitta den fungerande stackblitz här.

app.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  test: string;
  count: number = 0;


  fun(): void {
    this.test = 'You are my hero!';
    this.count++;
    alert('Test message :'+this.test+' Count :'+this.count);
  }
}

app.component.html:

<div class="container">
  <button type="button" (click)="fun()">Click me!</button>
</div>

Relaterade artiklar