Question

我看过NgStyle Documentation For Angular2。对我来说有点困惑。关于如何使用NgStyle与条件（if ... else）来设置任何元素的背景图像的任何想法？

Answer 1

在ngStyle绑定中使用三元运算符将作为if / else条件。

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>

Answer 2

也可以使用这种条件：

<div [ngStyle]="myBooleanVar && {'color': 'red'}"></div>

它需要更少的字符串连接...

Answer 3

以上答案对我不起作用，所以我决定改进这个。

您应该使用url('')，而不是有价值。

<li *ngFor="let item of items">
  <div 
    class="img-wrapper" 
    [ngStyle]="{'background-image': !item.featured ? 'url(\'images/img1.png\')' : 'url(\'images/img2.png\')'}">
  </div>
</li>

Answer 4

您可以按以下方式使用它：

export const LoginStack = StackNavigator({
  Splash: {
    screen: Splash,
  },
  Login: {
    screen: Login,
  },

},
{

  initialRouteName: 'Splash',

});



export const HomeStack = StackNavigator({

  KasianServices:{
    screen:KasianServices,
  },
  SpecialOffers:{
    screen:SpecialOffers,
  },

},
{
  initialRouteName: 'KasianServices',

});




export const RootNavigator = StackNavigator({
  LoginStack: {
    screen: LoginStack,
  },
  HomeStack:{
    screen: HomeStack,
  },
},{
  mode: 'modal',
  headerMode: 'none',
  initialRouteName: 'LoginStack',
}

);

export const Drawer = DrawerNavigator({
  Stack: { screen: RootNavigator },
},{
    contentComponent: RightSideMenu,
    drawerPosition: 'right',
})

Answer 5

<h2 [ngStyle]="serverStatus == 'Offline'? {'color': 'red'{'color':'green'}">Server with ID: {{serverId}} is {{getServerStatus()}} </h2>

或者您也可以使用类似这样的东西：

<h2 [ngStyle]="{backgroundColor: getColor()}">Server with ID: {{serverId}} is {{getServerStatus()}}</h2>

和* .ts

getColor(){return this.serverStatus === 'Offline' ? 'red' : 'green';}

Answer 6

我在现有项目中使用了以下代码

<div class="form-group" [ngStyle]="{'border':isSubmitted && form_data.controls.first_name.errors?'1px solid red':'' }">
</div>

Answer 7

zip(a[0],a[1], a[2])

Answer 8

要添加和简化GünterZöchbauer的示例，以使用（if ... else）设置背景图片以外的其他内容为例：

<p [ngStyle]="value == 10 && { 'font-weight': 'bold' }">

Answer 9

[ngStyle] ，带有基于条件的if和else情况。

附件

Answer 10

使用：

[ngStyle]="{'background-image': 'url(' +1=1 ? ../../assets/img/emp-user.png : ../../assets/img/emp-default.jpg + ')'}"

将[NgStyle]与条件组合（if..else）

10 个答案: