角4忽略空字段

Question

在下面的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> 

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