Angular如何在[ngStyle]和class上应用条件.如果条件true[ngStyle]运行，则类运行

Question

组件。Html

<div class="infoSection" [ngStyle]="FooterStyle"><br>

这里我有一个类(infoSection)，它来自我的Component.css和[ngStyle]=FooterStyle，它来自Component.ts，我想让

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

提前感谢。

Answer 1

我相信这个问题以前也被问过，但下面是我如何在CSS类和Angular的内联样式中实现条件。

<div 
[ngClass]="{'infoSection': Flag === 0}" 
[ngStyle]="Flag === 1 ? FooterStyle : {}">
<br>
</div>