首页 文章

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

提问于
浏览
2

我在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)数据类型 . 组正确显示但是,当我点击“加入”按钮时没有任何反应 . 我甚至无法登录到控制台 .

1 回答

  • 4

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

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

相关问题