Angular 4 HTML-Anzeige von leeren Feldern

Question

Im folgenden HTML-Schnipsel ignorieren:

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

Die powerPlant.rampPowerRate und powerPlant.rampRateInSeconds sind optionale Felder in dem zugehörigen Modell, das als unten:

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

Wie kann ich das bei der Anzeige überprüfen? Ich würde effektiv das div weglassen wollen, abhängig davon, ob der Wert vorhanden ist oder nicht! Irgendwelche Ideen?

Answer 1

Sie können nur prüfen mit * 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>