angular - ngIf observerer ikke variabelendring

Følgende er et HTML-kodeutdrag hvor ngIf sjekker om forceAngle er sann; som standard er forceAngle falsk. Når knappen klikkes, kaller jeg ForceAngles()-funksjonen og setter forceAngle til sann. Problemet er at når den er satt til sann, bør ngIf sjekke statusen og vise riktig mal. Akkurat nå får jeg ikke endringene som forventet. Jeg er ny på dette området og har surfet i flere timer på internett for å finne en ordentlig løsning. Jeg tror jeg har gått glipp av et grunnleggende Angular-prinsipp. Trenger ekspertstøtte på dette.

<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-fil

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

Svar #1

Problemet er at ingenting utløser Angulars endringsdeteksjon-mekanisme. Du har to måter å løse det på:

Den første

Implementer en mekanisme som vil utløse endringsdeteksjon ved å bruke tick()-metoden fra ApplicationRef-klassen:

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;
  }
}

Ta en titt på dette svaret for mer informasjon: Utløse oppdatering av komponentvisning fra tjeneste - Ingen leverandør for ChangeDetectorRef

En til

Bruk observable som forceAngle-type, og async-pipe i malen din (async-pipe utløser endringsdeteksjon automatisk når en ny verdi blir pushet til observable).

Eksempel .ts:

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

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

og mal:

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

Her kan du finne en fin artikkel om endringsdeteksjon i Angular: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Relaterte artikler