Angular 我如何在 [ngStyle] 和类上应用条件。如果条件为真 [ngStyle] 运行，否则类运行

Posted 2023-03-06

【中文标题】Angular 我如何在 [ngStyle] 和类上应用条件。如果条件为真 [ngStyle] 运行，否则类运行

【英文标题】：Angular how may I apply condition on [ngStyle] and class. That if condition true [ngStyle] runs otherwise class runs

【发布时间】：2021-06-03 16:17:16

【问题描述】：

组件.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 sn-p 和来自 component.css 的 infoSection sn-p

 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;
  

提前致谢。

【问题讨论】：

这已经被回答了。 1. 如何在 Angular ***.com/questions/35269179/… 中有条件地应用 CSS 类 2. 如何在 Angular 中有条件地应用内联样式 ***.com/questions/49280975/…

这能回答你的问题吗？ Angular: conditional class with *ngClass

在我提出问题之前，我已经阅读了有关堆栈溢出的所有答案。我希望我能得到答案

【参考方案1】：

我相信以前有人问过这个问题，但这里是我如何在 CSS 类和使用 Angular 的内联样式中实现条件。

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

【讨论】：

兄弟，我是 Mean Stack 开发人员。你使用什么技术？你有链接吗？