值更改时不会触发 ngIf

Question

我有一个简单的垫子微调器，它应该在 isLoading 为 true 时触发。变量按预期更改，但 mat-spinner 不可见。仅当我将 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);
  }
}

EDIT 添加触发 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);
  }
}

Answer 1

您的代码没有问题，可以按预期在此处运行。您必须手动运行 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();
    }
}

Answer 2

好的，这与 ngIf 无关，抱歉。问题是 setNode() 函数，第二次 setIsLoading() 调用（返回 false）是在第一次调用之后直接进行的，因为 await 没有按预期工作。

感谢所有试图提供帮助的人！

值更改时不会触发 ngIf

ngIf is not triggered when value changes

ngonchanges

angular

angular-changedetection