Angular(ngClick)方法在子组件中不起作用

时间:2017-08-19 22:57:38

标签: angular

我在ngFor语句中有子组件。 FirstLoginComponent是父组件。哪个有团体。

export class GroupComponent implements OnInit, OnDestroy {
@Input() group: Group;  
isLoading: boolean;

constructor(public groupService: GroupService) {        
}

ngOnInit(): void {

}    
public joinGroup() : void {
    console.log("dd");   
    this.groupService.joinGroup(this.group.id);
}

ngOnDestroy(): void {
    console.log(this.group);
}
//...
public getGroup() {
    return this.group;
}
public leaveGroup(): void {
    console.log("dd");
    this.groupService.leaveGroup(this.group.id);

}}

我有一个名为GroupComponent的子组件

<ul>
<li *ngFor="let group of Groups; let i = index">
    <group-partial [group] ="group"></group-partial>
</li>

我的FirstLoginComponent模板是

<div>
<img [src]="group.imageUrl" />
<h3>{{group.Name}}</h3>
<h5>{{group.Id}}</h5>
<button *ngIf="!group.isFollowing" id="#joinButton" (onClick)="joinGroup()">Join</button>
<button *ngIf="group.isFollowing" id="#leaveButton"  (onClick)="leaveGroup()">LEleave</button>

我的GroupComponent模板是

var testOver = function() {     
        console.log('hover has occurred');
    };
var testOut = function() {
        console.log('out');
    };
var testSettings = {
    sensitivity: 6, // default = 6
    interval: 100, // default = 100
    timeout: 1000, // default = 0
    over: testOver,
    out: testOut
};

$(window).hoverIntent(testSettings);

我可以将API中的数据作为Observable(any)数据类型获取。群组正常显示但是,当我点击“加入”时按钮没有任何反应我甚至无法登录到控制台。

1 个答案:

答案 0 :(得分:4)

根据您的代码,您使用的是(onClick),正确的是使用(click)

这可以在这里找到的官方文档中看到: https://angular.io/guide/user-input