angular - ngIf 不观察变量变化

Question

以下是一个 HTML 代码片段，其中 ngIf 检查 forceAngle 是否为真，默认情况下 forceAngle 为假。单击按钮后，我将调用 ForceAngles() 函数并将 forceAngle 设置为 true。问题是一旦设置为 true，ngIf 应该检查状态并显示正确的模板。目前我没有得到预期的变化。我是这个领域的新手，在互联网上冲浪了几个小时以获得合适的解决方案。我想我错过了 Angular 基础知识。需要这方面的专家支持。

<ng-container matColumnDef="AssemblyAngle">
            <mat-header-cell *matHeaderCellDef [ngClass]='txt-wrapper'> Assembly Angles</mat-header-cell>
            <div *ngIf="forceAngle == 'true' ; else inputtemplate;">
              <mat-cell *matCellDef="let element">
                <span class="txt-inner">{{forceAngle}}</span>
              </mat-cell>
            </div>
            <ng-template #inputtemplate>

              <mat-cell *matCellDef="let element" class="txt-wrapper mat-header-cell">
               abc
              </mat-cell>
            </ng-template>
      </ng-container>

<button class="btn-secondary" (click)="ForceAngles()">Force Angles</button>

.ts文件

ForceAngles() {
  this.forceAngle = 'true';
  
  this.loadCompressorOptimizeData();
  console.log(this.forceAngle);
  return this.forceAngle;
}

Answer 1

问题是没有任何东西会触发 Angular 变化检测 机制。您有两种解决方法:

第一个

使用 ApplicationRef 类的 tick() 方法实现触发变化检测的机制:

import {ApplicationRef } from '@angular/core';

export class Component {
  constructor(private ref: ApplicationRef) {}

  ForceAngles() {
     this.forceAngle = 'true';

     this.loadCompressorOptimizeData();
     console.log(this.forceAngle);
     this.ref.tick();
     return this.forceAngle;
  }
}

查看此答案以获取更多信息:Trigger update of component view from service - No Provider for ChangeDetectorRef

另一个

使用 observable 作为 forceAngle 类型，并在模板中使用 async 管道(async 管道自动触发变更检测当一个新值被推送到 observable 时)。

例子.ts:

export class Component {
    forceAngle: Subject<boolean> = new Subject();

    someMethod(): void {
        this.forceAngle.next(true);
    }
}

和模板:

<div *ngIf="(forceAngle | async) == true">some div</div>

在这里您可以找到一篇关于 Angular 中的变化检测的好文章: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html