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

這將導致每次我發送電子郵件時微調器都成倍增加，並且在第一次之后實際上永遠不會消失。

知道為什么會這樣嗎？

Answer 1

謝謝大家的意見和建議。

事實證明，問題不是 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>

Answer 2

嘗試使用 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.");
        }
    );
  }