Как изменить цвет елемента при выполнений условия?

Есть файл JSON с данными, которые выводятся в HTML разметку. Данные между собой связаны полем joinedWith и id. Первым выводится объект с id после чего остальные у которого joinedWith совпадает с id первого. Так же ести поле status у которого два значения, "open" и "closed". У объектов должна проводиться проверка на значение статуса, и если он open то цвет елемента должен быть желтым, если closed - оранжевый, и если среди объектов оба статуса, то другой цвет будет.

[
  {
    "id": 2861,
    "areaId": 1791,
    "joinedWith": null,
    "sku": "3",
    "defaultSku": "3",
    "status": "open",
    "countActive": 0
  },
  {
    "id": 2967,
    "areaId": 1791,
    "joinedWith": 2861,
    "sku": "1",
    "defaultSku": "1",
    "status": "closed",
    "countActive": 0
  },
  {
    "id": 2969,
    "areaId": 1791,
    "joinedWith": 2861,
    "sku": "4",
    "defaultSku": "4",
    "status": "open",
    "countActive": 1
  },
  {
    "id": 2977,
    "areaId": 1791,
    "joinedWith": 2861,
    "sku": "12",
    "defaultSku": "12",
    "status": "open",
    "countActive": 0
  }
]

app.component.html

<!--Container Zona 1-->
<div class="main-container">
  <h3>Zona 1</h3>
  <div class="card-container" *ngFor="let items of itemList">
    <div class="card card-1" *ngIf="items.areaId == 1791 && items.id == 2861">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="rectangle"></div>
    </div>

    <div class="card card-1" *ngIf="items.areaId == 1791 && items.joinedWith == 2861">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="card-2"></div>
    </div>
  </div>

  <div class="card-container" *ngFor="let items of  itemList">
    <div class="card card-1" *ngIf="items.areaId == 1791 && items.id == 2971 ">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="rectangle"></div>
    </div>

    <div class="card card-1" *ngIf="items.areaId == 1791 && items.joinedWith == 2971">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="card-2"></div>
    </div>
  </div>

  <div class="card-container" *ngFor="let items of  itemList">
    <div class="card card-1" *ngIf="items.areaId == 1791 && items.id == 2973 ">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="rectangle"></div>
    </div>

    <div class="card card-1" *ngIf="items.areaId == 1791 && items.joinedWith == 2973">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="card-2"></div>
    </div>
  </div>

  <div class="card-container" *ngFor="let items of itemList.reverse()">
    <div class="card card-1" *ngIf="items.areaId == 1791 && items.id == 2974 ">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="rectangle"></div>
    </div>

    <div class="card card-1" *ngIf="items.areaId == 1791 && items.joinedWith == 2974">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="card-2"></div>
    </div>
  </div>

  <div class="card-container" *ngFor="let items of itemList">
    <div class="card card-1" *ngIf="items.areaId == 1791 && items.id == 2970 ">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="rectangle"></div>
    </div>
  </div>

  <div class="card-container" *ngFor="let items of itemList">
    <div class="card card-1" *ngIf="items.areaId == 1791 && items.id == 2979 ">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="rectangle"></div>
    </div>
  </div>

  <div class="card-container" *ngFor="let items of itemList">
    <div class="card card-1" *ngIf="items.areaId == 1791 && items.id == 2980 ">
      <h4>{{items.sku}}</h4>
      <h5>{{items.defaultSku}}</h5>
      <div class="rectangle"></div>
    </div>
  </div>
</div>
<!--End Container Zona 1-->

Я попытался сделать проверку, но у меня нечего не получилось:

app.component.ts

import {Component, Pipe} from '@angular/core';
// @ts-ignore
import item from '../files/things.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'json-file-read-angular';
  public itemList: { id: number, areaId: number, joinedWith: number, sku: string, defaultSku: string, status: string, countActive: number }[] = item;

  checkStatute()
  {
    if(item.status === "open")
    {
      const element = <HTMLElement> document.getElementsByClassName('rectangle')[0];
      element.style.background = '#f4e800';
    }
    else if(item.status === "closed")
    {
      const element = <HTMLElement> document.getElementsByClassName('rectangle')[0];
      element.style.background = '#f64b25';
    }
    else if(item.status === "closed" && item.status === "open")
    {
      const element = <HTMLElement> document.getElementsByClassName('rectangle')[0];
      element.style.background = '#ff9900';
    }
  }
}