Блог

У меня есть панель выбора коврика, на которой я хочу отредактировать нижнее значение свойства следующим образом :

 ::ng-deep .cdk-overlay-pane {  bottom: 0px !important; }  

Но я хочу применять этот css только тогда, когда свойство bottom отрицательно.

Есть ли простой способ сделать это ?

Попробуйте что-нибудь подобное (это просто идея):

CSS:

 ::ng-deep .overlay-style-one cdk-overlay-pane {  bottom: 0px !important; }  ::ng-deep .overlay-style-two cdk-overlay-pane {  bottom: 10px !important; }  

HTML:

 lt;mat-form-fieldgt;  lt;mat-select #myselect  [ngClass]="{   'overlay-style-one': myselect.style.bottom = "100px",  'overlay-style-two': myselect.style.bottom lt; 0,  }"  gt;  lt;mat-optiongt;-- EXAMPLE --lt;/mat-optiongt;  lt;mat-option value="YES"gt;  Yes  lt;/mat-optiongt;  lt;mat-option value="NO"gt;  No  lt;/mat-optiongt;   lt;/mat-selectgt; lt;/mat-form-fieldgt;  

Я сомневаюсь, что таким образом можно получить нижнее свойство (#локальная ссылка). Если это не сработает, вы всегда можете использовать vrender2 или добавить идентификатор=»XXX» в массовый выбор и получить свойства классическим способом js:

 [ngClass]="{   'overlay-style-one': document.getElementById("XXX").style.bottom lt; 0,  'overlay-style-two': document.getElementById("XXX").style.bottom gt;= 0,  }"