Angular 2 Просмотр не будет обновляться после изменения переменной в подписке

У меня проблема, когда мое представление не изменится при обновлении моей переменной в моей наблюдаемой подписке. Я пытаюсь показать загрузчик загрузки, пока я жду ответа от моего бэкэнда, а затем отображу ответ, но счетчик не скроется. Моя подписка выглядит следующим образом:

this.isRequesting = "true";
this.questionService.onSubmit(form, this.questions).subscribe( (value) => {
        this._ngZone.run( () => {
             this.fileLocation = JSON.stringify(value);
             console.log(this.fileLocation);
            this.isRequesting = "false";
            console.log(this.isRequesting);
        });
    });

И мой html для этого компонента выглядит так:

<spinner *ngIf="isRequesting=='true'"></spinner>

Я вижу, что isRequesting изменяется на "false" на моей консоли после того, как я получаю ответ от бэкэнд (Springboot), но представление все равно не изменяется. Spinner был из SpinKit, и я изменил этот учебник чтобы мой счетчик работал.

Я пробовал:

Путь в учебнике (с stopRefreshing() в ошибке и полных параметрах наблюдаемого)
ngZone, чтобы заставить мое представление обновляться.

Есть ли у кого-нибудь идеи о том, как получить мое представление для обновления или каким-либо способом заставить прядильщика скрыться после получения ответа от моего бэкэнда?

Ответы

Ответ 1

Вы видите какую-либо ошибку на консоли? Это может быть связано с тем, что angular не запускает обнаружение изменений после того, как вы обновили значение. Я думаю, что вам не нужен ngZone.run как он будет запускать код за пределами угловой зоны.

this.questionService.onSubmit(form, this.questions).subscribe( (value) => {
            this.fileLocation = JSON.stringify(value);
            console.log(this.fileLocation);
            this.isRequesting = "false";
            console.log(this.isRequesting);
    });

Если по какой-либо причине вам нужно запустить это вне Angular-зоны, вам следует сообщить Angular для запуска цикла обнаружения изменений любым из этих методов.

просто оберните обновление isRequesting в установленное время ожидания
```
setTimeout( () => this.isRequesting = "false", 0);
```

вызов обнаружения изменений вручную

import {ChangeDetectorRef} from '@angular/core'
constructor(private ref: ChangeDetectorRef){}

this.questionService.onSubmit(form, this.questions).subscribe( (value)=> {
    //existing code
    console.log(this.isRequesting);
    this.ref.detectChanges();
});

Ответ 2

Вы также можете попробовать это решение: Руководство от Thoughtram

Краткая версия:

 import { ChangeDetectorRef } from '@angular/core';
    ...
    constructor(private cd: ChangeDetectorRef) {}
    ...
    ... .subscribe( () => {
           <yourstuff>
           this.cd.markForCheck();
        }

и вы хороши.

Фон: при изменении значения через .subscribe() angular не уведомляет, что он должен выполнить changeetection. Поэтому вам нужно запустить его самостоятельно.

Ответ 3

если вы используете его в выражении * ngIf, помните * ngIf = false не будет работать как выражение, которое вам нужно добавить

 <ul *ngIf=" somefunction(x) ? false: true">