如何解决如何在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“,否则您的应用程序将在生产中失败
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。