Multiple condition check in ternary operator

Question

I have dynamically loading , and want to set specific values, depends on the value from service. my below code will check only one condition. I Need it like

if well.RecordStatus == 'P' then PROVISIONAL
if well.RecordStatus == 'v' then VERIFIED
if well.RecordStatus == 'a' then aPPROVED
if well.RecordStatus == 'R' then REJECTED

please help

  <ion-row *ngFor="let wellsubsurface of wellSubsurfaceData">

          <ion-col>
            <ion-label >{{wellsubsurface.CreatedBy}}</ion-label>
          </ion-col>
          <ion-col>
            <ion-label style="color: green;">{{(wellsubsurface.RecordStatus === 'P')?'PROVISIONAL':'NA'}}</ion-label>
          </ion-col>

        </ion-row>

Answer 1

In your case I would create a function on the component class that you can call from the template. To maintain performance I would memoize the function, meaning it will only be re-executed when its arguments change.

First, let's create a method on the component class and memoize it using memoize from lodash via Lodash Decorators`:

@Component({...})
export class YourComponent {
  ...

  @Memoize()
  getRecordStatus(value) {
    const recordStatus = '';

    if (value.RecordStatus === 'P') {
      recordStatus = 'PROVISIONAL';
    } else if (value.RecordStatus === 'v') {
      recordStatus = 'VERIFIED';
    } else if (value.RecordStatus === 'a') {
      recordStatus = 'APPROVED';
    } else if (value.RecordStatus === 'R') {
      recordStatus = 'REJECTED';
    }

    return recordStatus;
  }
}

Now, in your template you can call this method like so:

<ion-row *ngFor="let wellsubsurface of wellSubsurfaceData">
  <ion-col>
    <ion-label >{{wellsubsurface.CreatedBy}}</ion-label>
  </ion-col>
  <ion-col>
    <ion-label style="color: green;">{{ getRecordStatus(wellsubsurface) }}</ion-label>
  </ion-col>
</ion-row>

This keeps your template more readable and maintainable IMHO. Using something like memoization here also maintains performance and avoids unnecessary method calls when Change Detection is performed.