ActivityIndicator не выключается после того, как для свойства элемента управления установлено значение false

Я использую 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

Что я здесь делаю неправильно?


nativescript angular2-nativescript
person Johannes Kraft    schedule 10.12.2018    source источник
comment
к какому свойству индикатора вы привязываете переменную processing?   -  person mast3rd3mon    schedule 10.12.2018
comment
Можете ли вы поделиться полным кодом с HTML?   -  person Manoj    schedule 10.12.2018
comment
Попробуйте удалить атрибуты ширины и высоты из ActivityIndicator.   -  person Manoj    schedule 10.12.2018
comment
Удалил их, но все равно ничего. Это так странно :D   -  person Johannes Kraft    schedule 10.12.2018
comment
вы также должны использовать свойство visible, и если вы используете angular, удалите теги <Page>   -  person mast3rd3mon    schedule 10.12.2018
comment
Окей, спасибо. Можете ли вы сказать мне, как использовать свойство visible? Не можете найти в документах?   -  person Johannes Kraft    schedule 10.12.2018
comment
Я предполагаю, что вы говорите об этом: [visibility]="processing ? 'visible' : 'hidden'"? Но ActivityIndicator, кажется, не показывает только это? Кажется, нужно показать свойство [busy]?   -  person Johannes Kraft    schedule 10.12.2018
comment
вам нужно и то, и другое, или вы сделали это в v2, и, насколько мне известно, это не изменилось   -  person mast3rd3mon    schedule 10.12.2018
comment
Они не используют его в примерах в документации: github.com/NativeScript/nativescript-sdk-examples-ng/tree/   -  person Johannes Kraft    schedule 10.12.2018
comment
Код должен работать так, как ожидалось — вот упрощенная демонстрация Playground точно такого же сценария play .nativescript.org/?template=play-ng&id=uKdrbq   -  person Nick Iliev    schedule 10.12.2018

Ответы (1)


arrow_upward
1
arrow_downward

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

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

person Johannes Kraft    schedule 11.12.2018