如何在ngStyle中使用for语句和if语句

问题描述

<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>

我想将ngStyle从上面的materialtable源添加到patientTemp。

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'} 
} 

MyArray的值。

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

我想比较patient_id值并根据限制值更改颜色。如果您不能用loof或ngStyle语句使用，请告诉我另一种方式。

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

这是一个耐心的对象。

解决方法

使用管道将更容易，最简单

@Pipe({
    name: 'tempColor'
})
export class TempColorPipe implements PipeTransform {

    transform(patient: Patient,...args: any[]): boolean {
        const myArray : any[] = args[0] || [];
        const patientBounds = myArray.find(m => m.patient_id === patient.patientId);
        if (!patientBounds) {
          return 'inherit';
        }
        if (patient.patientTemp > patientBounds.high_limit) {
          return 'red';
        }
        if (patient.patientTemp < patientBounds.low_limit) {
          return 'blue';
        }
        return 'inherit';
      }
}

在模板html中：

<mat-cell *matCellDef="let element; index as i">{{ element.patientTemp }}<img class="settings_btn" src="../../../assets/settings.png" (click)="openDialog(i);" style="cursor: pointer;color:{{element | tempColor:MyArray}}"/></mat-cell>

,

我认为最好的选择是将属性high_limit和low_limit添加到dataSource。 aApipe或函数使Angular执行多次，添加属性仅发生一次。像

 //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
 })

然后您可以在Mat-cell（*）中使用[ngStyle]

 <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>

（*）顺便说一句，不要使用src =“ ../../../ assets / settings.png”，必须是简单的“ src =” assets / settings.png“，否则您的应用程序将在生产中失败