Question

我遇到有角度点击事件的问题，它没有启动简单的console.log或警报。

这里我发布我的组件模板：

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

}

仍然没有启动我的点击事件

Answer 1

您应该在ts文件

中执行此操作

(click)="myFunc();"

并在.ts文件中

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

Answer 2

所以是的，最后＆＃34;解决方案＆＃34;真的很蠢......

我已经使用了@Sajeetharan告诉我的内容，但是＆＃34;问题＆＃34;那个镀铬是以某种方式保留缓存，甚至用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>

再次感谢所有人！

Answer 3

在后端/ typescript ：

中添加逻辑

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

在 html 方面：

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

Answer 4

在我的角度应用程序中，我被困在DIV中，无法在TS中针对单击和鼠标按下事件调用函数。
然后按照简单的CSS更改解决了我的问题。

添加到相应的DIV CSS：

pointer-events: all;

Angular2点击事件无效

4 个答案: