时间戳

首页 > 解决方案 > 值更改时不触发 ngIf

angular - 值更改时不触发 ngIf

问题描述

我有一个简单的 mat-spinner 应该在isLoadingis时触发true。变量按预期更改，但 mat-spinner 不可见。仅当我更改isLoading为 always时才可见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>

实用程序.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);
  }
}

编辑添加触发setter函数的组件：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);
  }
}

标签： angularngonchangesangular-changedetection

解决方案

您的代码很好，可以按预期在这里工作。您必须手动运行该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();
    }
}

推荐阅读