Angular（ngClick）方法在子组件中不起作用

Question

我在ngFor语句中有子组件。 FirstLoginComponent是父组件。其中包含组。

export class FirstLoginComponent implements OnInit, OnDestroy { 

isLoading: boolean; 
Groups: Group[]; 

constructor(
    public oidcSecurityService: OidcSecurityService, 
    private router: Router, 
    private firstLoginService: FirstLoginService 
) { 

} 

ngOnInit(): void { 
    this.getData(); 
    console.log(this.isLoading); 
} 

ngOnDestroy(): void { 
    console.log("FirstLogin Destroyed"); 
} 
//... 

private getData() { 
    this.firstLoginService.GetIndex() 
     .subscribe(data => this.Groups = data.Groups, 
     error => this.oidcSecurityService.handleError(error), 
     () => console.log(this.Groups));   
}} 

我有一个名为GroupComponent

子组件

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

}} 

我FirstLoginComponent模板

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

和我GroupComponent模板是

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

我可以从API获取数据作为Observable（any）数据类型。组显示正确，但是，当我单击“加入”按钮时，没有任何反应。我甚至无法登录到控制台。

Answer 1

根据你的代码，您正在使用(onClick)，正确的方法是使用(click)

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