我想根据投票分数(高或低)更改 li 的background-color
<div *ngIf="upvote > downvote" [ngStyle]="{background-color: hsla(120, 100%, 50%, 0.3);}" >
答案 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
处理