ActivityIndicator не отключится, если для свойства control установлено значение false - PullRequest
0 голосов
/ 10 декабря 2018

Я использую Anuglar6 и Nativescript, пытаясь заставить ActivityIndicator показывать, когда я делаю API-интерфейс (вход в систему).Это работает хорошо, но после того, как я установил логическую обработку в 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

Что я здесь не так делаю?

1 Ответ

0 голосов
/ 11 декабря 2018

Большое спасибо за вашу помощь в этом вопросе.Я не хотел нажимать кнопку еще раз, чтобы закрыть ActivityIndicator.Я хотел, чтобы он отключился после завершения задачи входа в систему.Данные были обновлены, но пользовательского интерфейса не было.Я решил это с 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']);
            });
}

Теперь он обновляет пользовательский интерфейс соответственно.

...