How to use *ngIf on an object to check if key has a specific value without doing *ngFor firstly?

Question

What I want to do is to show the first row in HTML (in below code) only on a condition using *ngIf. I've done the basic validation, but I have a hard time and can't find how I can do *ngIf accessing an object key directly (and not using an *ngFor before, on a different element). What I want to do is to show the row only when object.key === 'specific value'. I've tried options with "keys", "Object" but nothing seems to work. If you guys have any suggestion I would appreciate it.

my HTML

<ion-grid *ngIf="!isLoading && loadedBio.length > 0">
<ng-container *ngFor="let bio of loadedBio">
  <ng-container *ngIf="bio.category === '1'">
    <ion-row class="ion-padding">
      <ion-col>
        <ion-list class="no-last-border">
          <ion-item
            detail="false"
            *ngIf="bio.category === '1'">
            <ion-label
              [ngStyle]="{
                color:
                  bio.category === '1'
                    ? '#A34F83'
                    : 'var(--ion-color-secondary)'
              }"
              class="bioLabel"
              >{{bio.friendlyName}}</ion-label>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ng-container>
</ng-container>

my JS object I want to access the key from has the following format

loadedBio = [{key: value, key2: value}]

Answer 1

If you need to display each of the properties on your found object, then, in your component, you'd want to convert that found object to an array first - where each element in the array represents a property on the object, and then iterate over it to display each element:

const obj1 = {
  a: 'a title',
  b: 42,
  c: false
};

const arr1 = Object.values(obj1);

Put together that would look like this. First, in the component:

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   loadedBio = [{'key': 1, 'key2': 2}, {'key': 3, 'key2': 4}];

   obj1 = {
     a: 'a title',
     b: 42,
     c: false
   };

  arr1 = Object.values(this.obj1);

  constructor() {

  }

}

And in the view:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ng-container *ngIf="loadedBio">
    <ion-list *ngFor="let bio of loadedBio">
      <ng-container *ngIf="bio.key === 1">
         <ion-item>{{bio.key}}</ion-item>
      </ng-container>
    </ion-list>
  </ng-container>

  <ng-container *ngFor="let e of arr1">
    <ion-item>{{e}}</ion-item>
  </ng-container>

</ion-content>

This should give you an idea of how to handle your situation. Sounds like you want to transform the data in your component, and then iterate over it need be in your view.

Here is a link to the working StackBlitz: