Angular2 Klick-Ereignis funktioniert nicht

Question

Ich habe ein Problem mit einem angular2 click -Ereignis, es startet keine einfache console.log oder eine Warnung.

Hier poste ich meine Komponentenvorlage:

<div class="col-md-4"> 
<div *ngFor="let phone of phones"> 
{{phone.text}} 
</div> 
<input class="form-control" type="text" [(ngModel)]="phone"/> 
<button class="btn btn-primary" (click)="console.log('clicked');" type="button">Call</button> 
</div> 

Wenn ich auf die Schaltfläche klicken, gibt es nichts in der Konsole.

Ich habe versucht, eine Komponente Funktion auszuführen, auch ohne Glück.

ich es auf die gleiche Weise, als hier so mache: http://learnangular2.com/events/

Haben Sie Jungs mehr Dateien benötigen? Ich verstehe einfach nicht, warum dies nicht

funktioniert

Vielen Dank, Daniel

Edit:

Ok, so jetzt bin ich es, wie dies zu tun:

Vorlage :

<div class="col-md-4"> 
<div *ngFor="let phone of phones"> 
    {{phone.text}} 
</div> 
<input class="form-control" type="text" [(ngModel)]="phone"/> 
<button class="btn btn-primary" (click)="callPhone();" type="button">Call</button> 
</div> 

Und meine ts-Datei Komponente:

import {Component, OnInit, OnDestroy} from '@angular/core'; 
import {FormControl} from '@angular/forms'; 
import {CallService} from '../call.service'; 

@Component({ 
moduleId: module.id, 
selector: 'app-call-formular', 
templateUrl: './call-formular.component.html', 
styleUrls: ['./call-formular.component.css'], 
providers: [CallService] 
}) 
export class CallFormularComponent implements OnInit, OnDestroy { 

phones = []; 
connection; 
phone; 

constructor(private callService: CallService) { 
} 

callPhone(): any { 
    console.log('callPhone executed.'); 
} 

ngOnInit() { 
    this.connection = this.callService.getPhones().subscribe(phone =>       
{ 
     this.phones.push(phone); 
    }); 
} 

ngOnDestroy() { 
    this.connection.unsubscribe(); 
} 

} 

und startet immer noch nicht meine Click-Ereignis

Answer 1

Also ja, am Ende der "Lösung" war wirklich dumm ...

ich verwendet habe, was @Sajeetharan mir gesagt, aber die "Problem" war, dass Chrome den Cache irgendwie behielt, sogar mit Ctr + Shift + R flush.

An einem bestimmten Punkt löschte ich den Cache von Chrom und es funktionierte.

Danke euch allen!

Edit:

ich hier also erklären, wie ich es tat:

ich einige Konfigurationen auf den Virtualhost nur hinzugefügt, so brauche ich nicht den incognitus Modus von Chrom zu verwenden, und was ich fügte hinzu, ist:

# DISABLE ALL CACHING WHILE DEVELOPING 
<FilesMatch "\.(html|htm|js|css|json)$"> 
FileETag None 

<IfModule mod_headers.c> 
    Header unset ETag 
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" 
    Header set Pragma "no-cache" 
    Header set Note "CACHING IS DISABLED ON LOCALHOST" 
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT" 
</IfModule> 

Nochmals vielen dank an alle!

Answer 2

Sie sollten es in den ts tun Datei

(click)="myFunc();" 

und innerhalb der .ts Datei

myFunc():any{ 
    console.log('clicked'); 
} 

Answer 3

Fügen Sie Ihre Logik in Backend/Typoskript:

CallClick(): any { 
    console.log('clicked'); 
} 

Und html Seite:

<button class="btn btn-primary" (click)="CallClick()" type="button">Call</button>