[英]Style binding not updating on FontAwesome spinner icon in Angular 4
这似乎是一个愚蠢的问题,但经过调查和各种测试后,我不明白为什么会发生这种情况。
我有一个发送按钮,应该在发送时显示一个微调器,然后返回不显示它。
<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 的 sentEmails 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.");
}
);
}
问题是当我单击发送时,数据绑定将正确更新(假-真-假),但样式保持得好像我从未单击过一样。
万一重要,我正在使用 Font Awesome 5 作为微调器。
我也试过
<i class="fas fa-spinner fa-spin" *ngIf="sendingEmails"></i>
这将导致每次我发送电子邮件时微调器都成倍增加,并且在第一次之后实际上永远不会消失。
知道为什么会这样吗?
谢谢大家的意见和建议。
事实证明,问题不是 Angular,而是 FontAwesome。 我最近升级到 FontAwesome 5,它适用于 SVG,而不是 CSS。 因此,FontAwesome 将我的<i>
变成了 SVG,因此没有正确更新。
这是一个非常愚蠢的问题,但对于习惯了旧 FontAwesome 的人来说可能会出现,所以我想留下我的“解决方案”。
这就像做一样简单:
<span [style.visibility] = "sendingEmails ? 'visible' : 'hidden'">
<i class="fas fa-spinner fa-spin"></i>
</span>
尝试使用 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.");
}
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.