How to use for statement and if statement in ngStyle

Question

<mat-table [dataSource]="dataSource">
      <!-- Position Column -->
      <ng-container matColumnDef="patientId">
        <mat-header-cell *matHeaderCellDef>Patient ID.</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.patientId }}</mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="patientName">
        <mat-header-cell *matHeaderCellDef>Patient Name/mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.patientName }}</mat-cell>
      </ng-container>

      <!-- Temp Column -->
      <ng-container matColumnDef="patientTemp">
        <mat-header-cell *matHeaderCellDef>Temp</mat-header-cell>
        <mat-cell *matCellDef="let element; index as i">{{ element.patientTemp }}<img class="settings_btn" src="../../../assets/settings.png" (click)="openDialog(i);" style="cursor: pointer;"/></mat-cell>
      </ng-container>

      <!-- Bettery Column -->
      <ng-container matColumnDef="bettery">
        <mat-header-cell *matHeaderCellDef>Bettery</mat-header-cell>
        <mat-cell *matCellDef="let element" [ngStyle]="{'color': element.bettery > 80 ? 'green' : 'red'}">{{ element.bettery }}</mat-cell>
      </ng-container>

I would like to add ngStyle to patientTemp from the materialtable source above.

For(j = 0, j < MyArray.lenth, j++){
If(element.patientId == MyArray[j].patient_id){ 
'Color': Element.patientTemp > MyArray[j].high_limit ? 'red' : Element.patientTemp < MyArray[j].low_limit ? 'blue'} 
} 

The value of MyArray.

(2) [{…}, {…}]
0: {patient_id: "A11111110", sensor_type: 1, high_limit: 28, low_limit: 23}
1: {patient_id: "A11111111", sensor_type: 1, high_limit: 27, low_limit: 21}
length: 2
__proto__: Array(0)

I want to compare the patient_id value and change the color according to the limit value. If you can't use for loof and if sentence for ngStyle, I would appreciate it if you could tell me another way.

export class Patient {
  constructor(
    public patientId: string,
    public patientName: string,
    public maxAddress: string,
    public patientTemp: string,
    public bettery: string,
    public rssi: string
  ) {}
}

This is a patient object.

Answer 1

I think that the best bet is add the properties high_limit and low_limit to the dataSource. aApipe or a function makes that Angular execute it several times, adding properties only happens once time. Some like

 //add two new properties:
 this.patiens.forEach(x=>{
   const limits=this.myArray.find(l=>l.id==x.id)
   x.high_limit=limits?limits.high_limit:999999
   x.low_limit=limits?limits.low_limit:0
 })

then you can use [ngStyle] in mat-cell (*)

 <ng-container matColumnDef="patientTemp">
    <mat-header-cell *matHeaderCellDef>Temp</mat-header-cell>
    <mat-cell *matCellDef="let element; index as i" 
       [style.color]="element.patientTemp>element.high_limit?'red':
                      element.patientTemp<element.low_limit?'green':
                       null"
    >
       {{ element.patientTemp }}
       <!--CAREFULL, use simple src="assets/settings-png"-->
       <img class="settings_btn" src="assets/settings.png" 
           (click)="openDialog(i);" style="cursor: pointer;"/>
    </mat-cell>
  </ng-container>

(*)BTW, NOT use src="../../../assets/settings.png", must be simple "src="assets/settings.png", else your app fails in production