角度4次のHTMLスニペットで空のフィールドのHTML表示

Question

を無視：

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