Question

以下是HTML代码片段，其中ngIf检查forceAngle是否为true，默认情况下forceAngle为false。单击Button后，我调用ForceAngles（）函数并将forceAngle设置为true。问题是一旦设置为true ngIf应检查状态并显示正确的模板。目前我没有按预期得到改变。我是这个领域的新手，并在互联网上冲浪4小时以获得适当的解决方案。我想我错过了角度4基本。需要专家支持。

<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 更改检测机制。您有两种方法可以解决它：

第一个

使用tick()类：{/ p>中的ApplicationRef方法实施将触发变更检测的机制

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管道会在新值被推送到可观察状态时自动更改检测。）

示例.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

ng如果不注意变量变化

1 个答案:

第一个

另一个