ngIf не срабатывает при изменении значения - PullRequest
Новая
       62

ngIf не срабатывает при изменении значения

0 голосов
/ 09 октября 2018

У меня есть простой спиннер, который должен срабатывать, когда isLoading равен true.Переменная меняется по назначению, но циновка не отображается.Это видно только, если я изменил isLoading на всегда true.

Я что-то упустил?Заранее спасибо!

app.component.ts: 

import { Component, OnDestroy } from '@angular/core';
import { UtilityService } from './services/utility.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy {
  title = 'cpt';

  isLoading = true;
  subscription;

  constructor(private utilityService: UtilityService) {
    this.subscription = this.utilityService.getIsLoadingObservable().subscribe(isLoading => {
      this.isLoading = isLoading;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

app.component.html: 

<div class="loading-shade" *ngIf="isLoading">
  <mat-spinner></mat-spinner>
</div>
<app-router></app-router>

utility.service.ts: 

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UtilityService {

  public isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);

  constructor() { }

  getIsLoadingObservable(): Observable<boolean> {
    return this.isLoading.asObservable();
  }

  async setIsLoading(val: boolean) {
    await this.isLoading.next(val);
  }
}

РЕДАКТИРОВАТЬ Добавление компонента, который запускает функцию установки: start.component.ts: 

import { Component } from '@angular/core';
import { NodeService } from '../../services/node.service';
import { UtilityService } from '../../services/utility.service';

@Component({
  selector: 'app-start',
  templateUrl: './start.component.html',
  styleUrls: ['./start.component.scss']
})
export class StartComponent {

  isLoading = false;

  constructor(
    private nodeService: NodeService,
    private utilityService: UtilityService) {}

    async selectNode(val: string) {
      await this.utilityService.setIsLoading(true);
      if (val === 'bank') {
        await this.nodeService.setNode('http://localhost:8091');
      } else if (val === 'auditor') {
        await this.nodeService.setNode('http://localhost:8092');
      } else if (val === 'spv') {
        await this.nodeService.setNode('http://localhost:8093');
      } else {
        await this.nodeService.setNode('http://localhost:8094');
      }
      await this.utilityService.setIsLoading(false);
  }
}

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Хорошо, это не имеет ничего общего с ngIf, извините.Проблема заключалась в функции setNode(), где второй вызов setIsLoading() (обратно в false) выполняется непосредственно после первого, потому что await не работает должным образом.

Спасибо всем, кто пыталсяпомощь!

0 голосов
/ 09 октября 2018

Ваш код в порядке и работает здесь как положено.Вам нужно вручную запустить метод setIsLoading(), например: 

export class AppComponent implements OnDestroy {
    title = 'cpt';
    isLoading = true;
    subscription;
    test = false;

    constructor(private utilityService: UtilityService) {
      this.subscription = this.utilityService
        .getIsLoadingObservable()
        .subscribe(isLoading => {
          this.isLoading = isLoading;
        });

      setInterval(() => {
        this.test = !this.test;
        this.utilityService.setIsLoading(this.test);
      }, 2000);
    }

    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
}
...