#angular #ng-style
#angular #ng-style
Вопрос:
Я пытаюсь придать ссылке стиль цвета, который генерируется из API. Это работает для текстовых кнопок и т.д., Но когда я пытаюсь применить это к ссылке, это не работает.
<a href="#" [ngStyle]="{'color': brand?.colours.secondary}" *ngIf="!visitorName" (click)="setVisitor()">Don't want to give your name? That's fine! Start the review!</a>
Она просто переопределяется стилем ссылки bootstrap.
Однако применение этого к тегу ‘p’ работает просто отлично — таким образом, правильный цветовой код извлекается из API и загружается в ok:
<p class="mt-5" [ngStyle]="{'color': brand?.colours.secondary}">Don't worry we won't use your details for anything other then to give you the best experience possible.</p>
Комментарии:
1. у меня хорошо работает codesandbox.io/s/clever-grothendieck-qcu2j?file=/src/app /…
2. Вы уверены, что ваша версия typescript 3.7 или выше. Как необязательная цепочка (
?.) поддерживается начиная с версии 3.7.3. у меня это тоже сработало angular-ivy-zzn2rj.stackblitz.io
Ответ №1:
Вместо ngstyle используйте attr.style .
в SomeComponent.ts
myColor = fetchColorSomehow(); //#ff55aa or any color
в SomeComponent.html
[attr.style]="'color:' mycolor '!important'"
Здесь мы переопределяем цвет начальной загрузки, используя !важно