Angular 4 中的 FontAwesome 微调器图标上的样式绑定未更新

Question

这似乎是一个愚蠢的问题，但经过调查和各种测试，我不明白为什么会这样。

我有一个发送按钮，发送时应该显示一个微调器，然后返回到不显示它。

<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>

这将导致我每次发送电子邮件时微调器都成倍增加，并且在第一次发送后从未真正消失。

知道为什么会这样吗？

Answer 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.");
        }
    );
  }

Answer 2

感谢大家的意见和建议。

原来问题不是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>

Angular 4 中的 FontAwesome 微调器图标上的样式绑定未更新

Style binding not updating on FontAwesome spinner icon in Angular 4

css

angular

font-awesome

font-awesome-5

angular-fontawesome