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

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>

我想从上面的 materialtable 源中将 ngStyle 添加到 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", sensor_type: 1, high_limit: 27, low_limit: 21}
length: 2
__proto__: Array(0)

我要比较patient_id值，根据极限值改变颜色。如果你不能用for loof 和if sentence for ngStyle，如果你能告诉我另一种方法，我将不胜感激。

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

这是一个耐心的对象。

Answer 1

用管道会更容易和最简单

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

Answer 2

我认为最好的办法是将属性 high_limit 和 low_limit 添加到数据源。 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"，否则你的应用在生产中失败

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

How to use for statement and if statement in ngStyle

ng-style

angular

angular-material-table