[SOLVED] Struggles while using ngIf with Ngfor

Ionic Framework ionic-v3
1

[SOLVED]

Hello,

I’m having a hard time getting the updated variables to work with ngFor. I’m getting the variable worksavailable.available from a provider (this is updated by another provider - and it works). The issue I’m facing is that my ngFor card isn’t updating with the correct variable change.

I know I need to call this in the .ts file, but it doesn’t work with events (if I try a private variable). How do I get this to work.

Here’s the HTML.

<ion-content padding text-center>
  <div *ngFor="let work of works">
      <ion-card
        [style.background-color]="worksavailable.available ? '#000000' : '#EE7600'"
        (click)="goWorkDetails(work)"
        detail-none>
        <div class="myOverlay">
          <img src="assets/imgs/headers/{{work.image}}">
            <ion-card-header text-left *ngIf="!worksavailable.available" class="caption2">{{ work.id +'.title' | translate }}</ion-card-header>
            <ion-card-header text-left *ngIf="worksavailable.available" class="caption">{{ work.id +'.title' | translate }}</ion-card-header>
          <ion-icon class="lock" padding *ngIf="!availables" name="lock"></ion-icon>
          <ion-icon class="lock" padding *ngIf="availables" name="unlock" color="primary"></ion-icon>
        </div>
        <ion-row>
          <ion-card-content >
        {{ work.id +'.name' | translate }}
      </ion-card-content>
      </ion-row>
      </ion-card>
  </div>
</ion-content>

The “availables” variable is the local one that’s still there due to testing.

2

One broad way of classifying data is:

  1. stuff that might change out from under me at any time
  2. stuff that either doesn’t, or might but I don’t care

Type 1 data needs to have (a) a canonical holder who (b) exposes it only through a function (generally not great) or Observable (generally the best idea). It sounds like available is a type 1 boolean which is canonically held by a service provider, which is great. However, it’s being exposed as a raw boolean, which is bad. What I would do is change it to be a BehaviorSubject<boolean> in the provider, and then either subscribe to it in this page and store a locally updated copy or use the AsyncPipe in the template.