2017-05-24 83 views
-1

嘗試在ngFor期間通過點擊輸出函數調用。我不知道如何引用它。Angular2 onclick in ngfor

我是新來的angualr2,我不確定這是否是實現此目的的正確方法。我希望有任何建議。

export class Navbar { 

    constructor() {} 

    public userNavs = [ 
     { title: 'Account', click: 'account()' }, 
     { title: 'Logout', click: 'logout()' } 
    ] 

    logout() { 
     console.log('working'); 
    } 

    account(){ 
     console.log('working'); 
    } 

    ngOnInit() {} 
} 

////HTML//// 

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="userdropdown">    
    <li *ngFor="let nav of userNavs" ><a class="dropdown-item btn-sm" (click)="{{ nav.click }}" >{{ nav.title }}</a></li> 
</ul> 
+0

這是從你的描述,你正在努力實現的代碼真的不清楚,它看起來像一個爛攤子。 –

+1

不要在輸出屬性內使用插值'(點擊)' – yurzui

回答

1

這是一個更好的辦法:

export class Navbar { 

    constructor() {} 

    public userNavs = [ 
     { title: 'Account', click: 'account()' }, 
     { title: 'Logout', click: 'logout()' } 
    ] 

    eventClick(userNav){ 
     if('Account') this.account(); 
     else this.logout(); 
    } 

    logout() { 
     console.log('working logout'); 
    } 

    account(){ 
     console.log('working account'); 
    } 

    ngOnInit() {} 
} 

////HTML//// 

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="userdropdown">    
    <li *ngFor="let nav of userNavs" ><a class="dropdown-item btn-sm" (click)="eventClick(nav)" >{{ nav.title }}</a></li> 
</ul> 
+0

太棒了,這看起來好多了!謝謝 – user1019416