Question

我正在尝试将元素的背景颜色绑定到函数：

 <td [style.background-color]="patientService.getSeverityColor(interval.averageSeverity)">{{interval.earliestTime}}-{{interval.latestTime}}</td>

这曾经有用，但它不再存在，我不是为什么。我甚至应该将属性绑定到函数，还是应该只使用组件属性？

我这样做的原因是interval.averageSeverity是一个代表某种颜色的数字，所以我将数字传递给函数并返回颜色：

getSeverityColor(severity: number) {
switch (severity) {
  case -1:
    return "grey";
  case 0:
    return "green";

  case 1:
    return "yellow";

  case 2:
    return "orange";

  case 3:
    return "red";

}
}

如果我无法绑定某个功能，您对我如何解决这个问题有什么建议吗？感谢。

编辑，更多代码：

<div class="patients-container" (dragover)="allowDrop($event)" (drop)="onDrop($event)">
  <div class="patient-box level-1" draggable="true" *ngFor="let bed of beds" (dragstart)="onDrag($event, bed)">
    <div class="location-header">
      <p class="location" (click)="openEditPatientDialog(bed)">{{bed.philipsName}}<md-icon>edit</md-icon></p>
      <p class="name" [hidden]="bed.patientName == ''">{{bed.patientName}}</p>
      <p class="O2" [hidden]="!additionalO2"><img  (click)="toggleO2()" src="../../assets/med_O2.png"></p>
      <p class="O2" [hidden]="additionalO2"><img  (click)="toggleO2()" src="../../assets/no_O2.png"></p>
      <p class="triage"><md-icon [style.color]="patientService.getSeverityColor(bed.absoluteSeverity)">favorite</md-icon></p>
    </div>
    <div class="intervals-header"> 
      <table>
        <tr *ngFor="let interval of bed.timeWindows">
          <td [ngStyle]="{'background-color': patientService.getSeverityColor(interval.averageSeverity)}">{{interval.earliestTime}}-{{interval.latestTime}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 1

使用ngStyle。

<dependentAssembly>
    <assemblyIdentity name="System.Runtime" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
    <bindingRedirect oldVersion="0.0.0.0-4.0.10.0" newVersion="4.0.10.0" />
</dependentAssembly>

您可能必须指定默认<td [ngStyle]="{'background-color': patientService.getSeverityColor(interval.averageSeverity)}">{{interval.earliestTime}}-{{interval.latestTime}}</td>（或在方法中返回默认颜色字符串值），以便该方法默认返回有效的颜色字符串。

例如，如果您希望默认返回number，请将其添加到您的方法

'grey'

属性绑定到函数

1 个答案: