Angular2單擊事件不起作用

我面臨angular2單擊事件的問題，它不會啓動簡單的console.log或警報。Angular2單擊事件不起作用

這裏我發表我的組件模板：

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

當我按一下按鈕，有什麼在控制檯中。

我試着執行一個組件函數，但也沒有運氣。

我在做同樣的方式比這裏： http://learnangular2.com/events/

你們是否需要更多的文件？我只是不明白爲什麼這不工作

太感謝你了，丹尼爾

編輯：

好了，所以我現在做這樣的：

模板：

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

我的TS文件組成：

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(); 
} 

}

，但仍不能推出我的點擊事件

來源

2017-04-03 DaRo

在該網站中，作者綁定了一個'console.log'到模板中的單擊事件？ – echonax

你不得不暴露在'你的組件方面console'對象，那麼只有你可以訪問它..本機瀏覽器對象將不提供直接內模板事件.. –

我編輯我的答案，謝謝大家！ – DaRo

所以是的，末尾的「解決方案」是很愚蠢......

我用什麼@Sajeetharan告訴我的，但「問題」是鉻是以某種方式保持緩存，甚至用Ctr + shift + R沖洗它們。

在某些時候，我從chrome中刪除了緩存並且它工作正常。

謝謝大家！

編輯：

所以我在這裏解釋我是如何做到了：

我只是增加了一些配置到虛擬主機，所以我不需要使用Chrome的incognitus模式，什麼我說的是：

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

再次感謝大家！

來源

2017-04-03 11:07:20 DaRo

更好地與開發工具和禁用緩存運行，而DevTool是開放 –

其更好地標記現有答案 – Sajeetharan

我加了一些設置最後的虛擬主機，我編輯了我的答案 – DaRo

你應該這樣做的TS文件

(click)="myFunc();"

和.TS內文件

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

來源

2017-04-03 10:49:23 Sajeetharan

我根據您的建議編輯了我的答案，謝謝您的幫助！ – DaRo

最後，我發現它是什麼（檢查我的答案）....我覺得很愚蠢！感謝您的幫助 – DaRo

其上面發佈的內容相同 – Sajeetharan

添加您的邏輯後端/打字稿：

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

而在HTML方：

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

來源

2017-04-03 10:52:20

我根據您的建議編輯了我的答案，謝謝您的幫助！ – DaRo

它是否適用於您？ –

嘗試只用按鈕HTML和評論所有的OnInit，服務調用和其他代碼，然後檢查，如果工作或沒有？ –

Angular2單擊事件不起作用

回答

相關問題