Angular - 點擊事件沒有觸發按鈕

我更新angular和angular-cli後，我仍然面臨奇怪的問題。我有兩個<div> s，我試圖隱藏一個，當點擊一個按鈕時顯示另一個。Angular - 點擊事件沒有觸發按鈕

這裏是我的功能：

ngOnInit() { 
    this.goalView = this.el.nativeElement.getElementsByClassName('goal-view')[0]; 
    this.goalEdit = this.el.nativeElement.getElementsByClassName('goal-edit')[0]; 
    } 

    triggerEdit(): void { 
    this.goalView.style.display = 'none'; 
    this.goalEdit.style.display = 'block'; 
    } 

    triggerView(save: boolean): void { 
    this.goalEdit.style.display = 'none'; 
    this.goalView.style.display = 'block'; 
    }

而且我的模板：

<div class="goal-view"> 
    ... 
    <button class="ui right floated green button margin-vertical-10" (click)="triggerEdit()"><i class="ui edit icon"></i>Edit</button> 
</div> 
<div class="goal-edit"> 
    ... 
    <button class="ui right floated green button margin-vertical-10"><i class="ui save icon" (click)="triggerView(true)"></i>Save</button> 
</div>

當我點擊edit按鈕，它的工作原理。當我點擊save按鈕時，它有時會起作用。但有時它不會，我應該點擊30-40次才能使它工作。我試圖在triggerView函數中使用console.log("something")，但它的確如此。有時工作，有時不工作。

我還檢查click事件event.target：

document.addEventListener('click', function(evt) { 
    console.log(evt.target); 
}, false);

似乎正常。當我點擊時，它打印正確的<button>。

有什麼想法應該是什麼問題？

來源

2017-04-11 Bünyamin Sarıgül

您有圖像標記而不是按鈕標記的第二個點擊偵聽器，是故意的嗎？ – cy3er

哦，我爲此浪費了3個小時:(你是對的，謝謝！ –

@ cy3er不要張貼答案評論.post它作爲答案 – IsuruAb

你有圖像標籤，而不是按鈕標籤上的第二次點擊收聽。

來源

2017-04-11 11:08:34 cy3er

通常，您不應該在組件中處理直接元素訪問。

相反，您應該切換到使用表示元素狀態的屬性。

試試這個

<div class="goal-view" [hidden]="hideGoalView"> 
... 
</div> 

<div class="goal-edit" [hidden]="hideGoalEdit"> 
... 
</div> 


ngOnInit() { 
    this.hideGoalView = false; 
    this.hideGoalEdit = true; 
} 

triggerEdit(): void { 
    this.hideGoalView = true; 
    this.hideGoalEdit = false; 
} 

triggerView(save: boolean): void { 
    this.hideGoalView = false; 
    this.hideGoalEdit = true; 
}

來源

2017-04-11 10:50:41 devnull69

這是有用的，但不是我的代碼的問題，無論如何謝謝 –

它有相同的效果嗎？你試過嗎？ – devnull69

是的，我知道它會做同樣的事情。我的代碼。 –

您將事件添加到兩個不同的元素。

方法triggerEdit是按鈕標籤事件，這樣你就可以在整個按鈕點擊的說法。

方法triggerView是事件我元素，所以你必須點擊按鈕上的小區域來調用它。

我是否建議你認真對待@ devnull69的建議。這將爲您節省未來的問題。

來源

2017-04-11 11:09:57

Angular - 點擊事件沒有觸發按鈕

回答

相關問題