将控件属性设置为false后，ActivityIndi​​cator不会关闭

Question

我正在使用Anuglar6和Nativescript尝试使api工作（登录）时显示ActivityIndi​​cator。效果很好，但是在将布尔处理设置为false后，它仍然显示旋转的动画。

<StackLayout class="container">
  <StackLayout class="form">
    <Label class="h3 lbl" text="Användarnamn:" textWrap="true"></Label>
    <TextField class="field input input-border" [isEnabled]="!processing" keyboardType="email" autocapitalizationType="none" (textChange)="setUsername($event)" (returnPress)="focusPassword()"></TextField>
    <Label class="h3 lbl" text="Lösenord:" textWrap="true"></Label>
    <TextField #password class="field input input-border" [isEnabled]="!processing" secure="true" autocapitalizationType="none" (textChange)="setPassword($event)"></TextField>
    <Button class="loginBtn" text="LOGGA IN" [isEnabled]="!processing" (tap)="submit()"></Button>
    <ActivityIndicator row="1" [busy]="processing" width="100" height="100" class="activity-indicator"></ActivityIndicator>
  </StackLayout>
</StackLayout>

    private processing = false;

    public login(): void {
    this.processing = true;
    this.authService.login(this.username, this.password)
        .subscribe(
            () => {
                console.log(this.processing);
                this.processing = false;
                console.log(this.processing);
                // this.router.navigate(['home']);
            });
}

console.log打印输出

JS: true
JS: false

我在这里做什么错了？

Answer 1

非常感谢您提供的所有帮助。我不想再单击一次按钮来关闭ActivityIndi​​cator。我希望在登录任务完成后将其关闭。数据已更新，但用户界面未更新。我用BehaviorSubject解决了。

public processing$ = new BehaviorSubject<boolean>(false);

public login(): void {
    this.processing$.next(true);
    this.authService.login(this.username, this.password)
        .subscribe(
            () => {
                console.log(this.processing$);
                this.processing$.next(false);
                console.log(this.processing$);
                this.router.navigate(['home']);
            });
}

现在，它会相应地更新ui。