大家。我刚开始学习Angular 6,我有一个问题。我需要在按下按钮时,不仅按钮文本发生变化,而且事件发生变化,按下按钮时也会发生变化。例如,第一次单击按钮会将组件添加到内存中,第二次单击此按钮将被删除。
这是我的HTML代码:
<button class="btn" (click)="toggleEvent()">
{{addToMemory ? 'Add to memory' : 'Delete from memory'}}
</button>
来自TS:
addToMemory: boolean = true;
toggleEvent(): void {
this.addToMemory = !this.addToMemory;
}
我有一个功能,将电影添加到内存和删除。
add() {}
delete() {}
但我不明白如何通过点击这些功能来切换按钮。请解释和帮助。我发现或不起作用的示例,或者不清楚如何应用它们。对不起,我的英语不好。
你的HTML部分:
<button class="btn" (click)="toggleEvent()">
{{addToMemoryFlag ? 'Add to memory' : 'Delete from memory'}}
</button>
你的TS部分:
addToMemoryFlag: boolean = true;
toggleEvent() {
this.addToMemoryFlag = !this.addToMemoryFlag;
if(this.addToMemoryFlag) {
this.addToMemory();
} else {
this.deleteFromMemory();
}
}
最好区分
addToMemory
变量和addToMemory()
方法之间的名称,更改变量或方法的名称。
模板:
<button class="btn" (click)="toggleEvent()">
{{addToMemory ? 'Add to memory' : 'Delete from memory'}}
</button>
零件:
addToMemory: boolean = true;
toggleEvent(evt){
this.addToMemory = !this.addToMemory;
switch(evt.target.innerHTML.trim()){
case 'Add to memory':
this.Addtomemory();
break;
case 'Delete from memory':
this.DeleteFrommemory();
break;
}
}