[英]Angular how may I apply condition on [ngStyle] and class. That if condition true [ngStyle] runs otherwise class runs
組件.Html
<div class="infoSection" [ngStyle]="FooterStyle"><br>
在這里,我有一個來自我的 Component.css 的類(infoSection)和來自 component.ts 的 [ngStyle]=FooterStyle,我想提出一個條件:
<div class="infoSection **(else Run this when Flag===0)**" [ngStyle]="FooterStyle **(RUN THIS IF Flag===1. I dont know the syntax)**"><br>
我已經口頭寫下了 div 標簽中的條件。 但我不知道如何做到這一點的確切語法
現在我正在編寫來自 component.ts 的 FooterStyle 片段和來自 component.css 的 infoSection 片段
Component.ts
_Flag:any; //Flag Property
//This is Footer Object
FooterStyle={
'background-image':'',
'background-repeat':'no-repeat',
'background-size': 'cover',
'background-attachment': 'fixed',
'background-position': 'top',
}
//Function For Populating the FooterStyle Object with data coming from Backend
this._GeneralSettingsService.GetFooterImage().subscribe((docs:any)=>{
let _docs = docs.Result;
if(_docs){
this.FooterImageUrl = this.FooterImageFolderUrl + _docs[0].imageUrl;
this.FooterStyle['background-image'] = 'url('+this.FooterImageUrl+')';
this._Flag=1;
console.log(this._Flag);
}else{
this._Flag=0;
console.log(this._Flag);
}
})
Component.css
//infoSection snippet
.infoSection{
background-image: url('../../assets/images/tracey2.jpg');
background-size: cover;
background-attachment: fixed;
width:auto;
background-position: center;
}
提前致謝。
我相信以前有人問過這個問題,但這里是我將如何在 CSS class 和 Angular 的內聯樣式中實現條件。
<div
[ngClass]="{'infoSection': Flag === 0}"
[ngStyle]="Flag === 1 ? FooterStyle : {}">
<br>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.