Javascript Angular 4忽略空字段的HTML显示

在以下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>

---

当我显示时，如何检查此项？我实际上希望完全省略div，这取决于该值是否存在！有什么想法吗？

你可以用*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>

MaxPower:{{powerPlant.MaxPower}}MinPower:{{{powerPlant.MinPower}
PowerPlantType:{{powerPlant.PowerPlantType}}组织：{{powerPlant.powerPlantName}
RampPowerRate:{{powerPlant.RampPowerRate}}RampRateInSeconds:{{{powerPlant.RampRateInSeconds}

酷！谢谢你的提示！

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