Angular 4

时间:2018-04-23 22:44:08

标签: angular font-awesome font-awesome-5 angular-fontawesome

这似乎是一个愚蠢的问题,但在调查和进行各种测试后,我不明白为什么会发生这种情况。

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

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

每次发送电子邮件时,这都会导致微调器倍增,并且在第一次发送后从未实际消失。

知道为什么会这样吗?

2 个答案:

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