根据条件分配ngStyle

时间:2019-07-17 17:09:59

标签: javascript angular

我想根据投票分数(高或低)更改 li background-color

<div *ngIf="upvote > downvote" [ngStyle]="{background-color: hsla(120, 100%, 50%, 0.3);}" > 

4 个答案:

答案 0 :(得分:1)

您可能应该创建2个类,每种样式一个。然后,您可以使用ngClass。在下面的示例中,您有2个名为red或blue的类。条件已弥补。你可以把你想要的东西放在那里

 <div [ngClass]="{'blue': vote == 'high', 'red': vote == 'low'}"></div>

答案 1 :(得分:0)

我认为在您的情况下,此代码有效。

<div *ngIf="upvote > downvote" [ngStyle]="{'background-color':check=== 'upvote ' ? hsla(120, 100%, 50%, 0.3) : hsla(100, 20%, 40%, 0.5) }"></div>

答案 2 :(得分:0)

如果您要更改C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ContactsManager.java:26: error: package android.support.annotation does not exist import android.support.annotation.NonNull; ^ C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ContactsManager.java:27: error: cannot find symbol import android.support.v4.app.ActivityCompat; ^ symbol: class ActivityCompat location: package android.support.v4.app C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ContactsProvider.java:7: error: package android.support.annotation does not exist import android.support.annotation.NonNull; ^ C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ReactNativeContacts.java:3: error: package android.support.annotation does not exist import android.support.annotation.NonNull; ^ C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ContactsManager.java:924: error: cannot find symbol protected static void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, ^ symbol: class NonNull location: class ContactsManager C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ContactsManager.java:925: error: cannot find symbol @NonNull int[] grantResults) { ^ symbol: class NonNull location: class ContactsManager C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ContactsProvider.java:239: error: cannot find symbol @NonNull ^ symbol: class NonNull location: class ContactsProvider C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ReactNativeContacts.java:35: error: cannot find symbol public static void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { ^ symbol: class NonNull location: class ReactNativeContacts C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ReactNativeContacts.java:35: error: cannot find symbol public static void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { ^ symbol: class NonNull location: class ReactNativeContacts C:\Users\Jacob\kalleo\kalleo-master\kalleo-native\node_modules\react-native-contacts\android\src\main\java\com\rt2zz\reactnativecontacts\ContactsManager.java:921: error: cannot find symbol ActivityCompat.requestPermissions(currentActivity, new String[]{PERMISSION_READ_CONTACTS}, PERMISSION_REQUEST_CODE); ^ symbol: variable ActivityCompat location: class ContactsManager 10 errors > Task :react-native-contacts:compileDebugJavaWithJavac FAILED FAILURE: Build failed with an exception.``` 上的背景颜色大于upvote,则可以按照以下步骤进行操作。

downvote

答案 3 :(得分:0)

要在ngStyle内检查条件的选项以下实现预期使用,并且代码中的问题是,当downvote> upvote由于ngIf时,div将不可用

其他次要观察结果
1.在背景颜色和颜色周围使用引号
2.删除ngIf以处理这两个条件(upvote> downvote,downvote> upvote)并在ngStyle内移动条件

<div [ngStyle]="{'background-color': upvote > downvote? 'red': 'blue'}" >
Test
  </div>

代码示例-https://stackblitz.com/edit/angular-ssy7uo?file=src/app/app.component.html

注意:使用ngClass处理更多CSS属性,以避免使用ngStyle处理