这似乎是一个愚蠢的问题,但在调查和进行各种测试后,我不明白为什么会发生这种情况。
我有一个发送按钮,应该在发送时显示微调器,然后返回到不显示它。
<button (click)="sendCSV()" class="btn btn-primary btn-sm"><i class="fas fa-spinner fa-spin" [style.visibility] = "sendingEmails ? 'visible' : 'hidden'"></i> Send</button>
{{sendingEmails}}
我在按钮下面添加了{{sendingEmails}}以验证变量是否正确更改,确实如此。 在我的组件中,我有一个最初为false的sendingEmails var,并且:
sendCSV() {
this.sendingEmails = true;
this.eventsService.sendGuestlistByEmail(this.eventId).subscribe(
res => {
this.sendingEmails = false;
console.log(res);
},
err => {
this.sendingEmails = false;
console.log("Error.");
}
);
}
问题在于,当我点击发送时,数据绑定将正确更新(false-true-false),但样式保持不变,就像我从未点击过一样。
如果重要,我将使用Font Awesome 5作为微调器。
我也试过
<i class="fas fa-spinner fa-spin" *ngIf="sendingEmails"></i>
每次发送电子邮件时,这都会导致微调器倍增,并且在第一次发送后从未实际消失。
知道为什么会这样吗?
答案 0 :(得分:2)
感谢大家的意见和建议。
事实证明问题不是Angular,而是FontAwesome。我最近升级到FontAwesome 5,它与SVG一起使用,而不是CSS。所以,FontAwesome正在把我变成一个SVG,因此没有正确更新。
这是一个非常愚蠢的问题,但它可能会出现在习惯使用旧版FontAwesome的人身上,所以我想留下我的解决方案&#34;。
这很简单:
<span [style.visibility] = "sendingEmails ? 'visible' : 'hidden'">
<i class="fas fa-spinner fa-spin"></i>
</span>
答案 1 :(得分:1)
尝试使用ChangeDetectorRef.detectChanges()在组件上运行更改检测
constructor(private changeD: ChangeDetectorRef) {}
sendCSV() {
this.sendingEmails = true;
this.eventsService.sendGuestlistByEmail(this.eventId).subscribe(
res => {
this.sendingEmails = false;
this.changeD.detectChanges();
console.log(res);
},
err => {
this.sendingEmails = false;
console.log("Error.");
}
);
}