Angular 4忽略空字段的HTML显示

Question

在以下HTML代码段中：

<div class="twelve wide column">
  <div class="value">
    MaxPower: {{ powerPlant.maxPower }} MinPower: {{ powerPlant.minPower }}
  </div>
  <div class="value">
    PowerPlantType: {{ powerPlant.powerPlantType }} Organization: {{ powerPlant.powerPlantName }}
  </div>
  <div class="value">
    RampPowerRate: {{ powerPlant.rampPowerRate }} RampRateInSeconds: {{ powerPlant.rampRateInSeconds }}
  </div>
</div>

powerPlant.rampPowerRate和powerPlant.rampRateInSeconds是相关模型中的可选字段，如下所示：

export interface PowerPlant {
  powerPlantId: number;
  powerPlantName: string;
  minPower: number;
  maxPower: number;
  powerPlantType: string;
  rampRateInSeconds?: number;
  rampPowerRate?: number;
}

我显示时如何检查？我实际上想要完全省略div，具体取决于值是否存在！有什么想法吗？

Answer 1

您可以使用* ngIf

进行检查

<div *ngIf="powerPlant.maxPower && powerPlant.powerPlantType && powerPlant.rampPowerRate" class="twelve wide column">
  <div class="value">
    MaxPower: {{ powerPlant.maxPower }} MinPower: {{ powerPlant.minPower }}
  </div>
  <div class="value">
    PowerPlantType: {{ powerPlant.powerPlantType }} Organization: {{ powerPlant.powerPlantName }}
  </div>
  <div class="value">
    RampPowerRate: {{ powerPlant.rampPowerRate }} RampRateInSeconds: {{ powerPlant.rampRateInSeconds }}
  </div>
</div>