当一个Angular对象存在时，我如何改变CSS？
当一个Angular对象存在时，可以通过以下几种方式来改变CSS：
- 使用ngClass指令：ngClass指令可以根据条件动态地添加或移除CSS类。你可以在Angular对象存在时，将特定的CSS类添加到元素上。例如，假设有一个名为"isActive"的Angular对象，你可以使用ngClass指令来添加一个名为"active"的CSS类：<div [ngClass]="{'active': isActive}">内容</div>这将在isActive为true时添加"active"类。
- 使用ngStyle指令：ngStyle指令可以根据条件动态地设置元素的内联样式。你可以在Angular对象存在时，通过ngStyle指令来设置特定的CSS样式。例如，假设有一个名为"isActive"的Angular对象，你可以使用ngStyle指令来设置元素的背景颜色：<div [ngStyle]="{'background-color': isActive ? 'red' : 'blue'}">内容</div>这将在isActive为true时将背景颜色设置为红色，否则设置为蓝色。
- 使用ngIf指令：ngIf指令可以根据条件动态地添加或移除DOM元素。你可以在Angular对象存在时，使用ngIf指令来添加或移除包含特定CSS样式的元素。例如，假设有一个名为"isActive"的Angular对象，你可以使用ngIf指令来添加一个带有特定CSS类的div元素：<div *ngIf="isActive" class="active">内容</div>这将在isActive为true时添加一个带有"active"类的div元素。
以上是几种常见的方法，根据具体的需求和场景，选择适合的方式来改变CSS。对于更复杂的CSS操作，你可以结合使用这些方法，或者使用自定义指令来实现。
相关·内容
1回答
如何突出显示角6中的活动制表符
html、angular
**每件事都表现得很完美，但如何突出活动的一面却不使用任何第三方组件，我希望有人能在这方面帮助我。
谢谢**
<ul class="tabs">
<li [ngClass]=" {'active-tab': tab==1 }"><a (click)=" tab = 1 " href="javascript:void(0)">Tab 1</a></li>
<li [ngClass]=" {'active-tab': tab==
浏览 3提问于2019-10-06得票数 1
回答已采纳
2回答
AngularJs2.0内置组件--如何正确使用它们
angular
角2提供了许多内置组件.比如NgIf，NgFor，NgStyle，NgNonBindable.有些组件与“*”一起使用，例如*ngIf和*ngFor：
<div *ngFor="item of items">
{{item}}
</div>
其中一些与“[]”一起使用，例如ngStyle和ngClass：(组件输入？)
<div [ngStyle]="{'background-color': 'yellow'}">Content</div>
其中一些被用作“角-1”：例如：
&
浏览 1提问于2016-03-16得票数 0
回答已采纳
4回答
如何用角动态地更改css类
javascript、html、css、angular、typescript
我正在使用css导航和一个表单，我试图更改css类以显示: none；对于每个未选中的选项卡，我尝试通过使用bootstrap4实现这一点，但没有使用。
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="itemSummary-tab" data-toggle="tab"
浏览 8提问于2020-01-22得票数 3
回答已采纳
4回答
如何通过角部动态地赋予模板样式？
css、angular
我的HTML部分是：
<li *ngIf="action==null" id="list_icon"><a href="#" id="anchor"><i class={{icon}}></i> {{name}} {{color}}</a></li>
<li *ngIf="action!=null" id="list_icon" class="active"><span id=&
浏览 3提问于2015-10-31得票数 2
回答已采纳
1回答
错误TS2554:预期的3-4参数，但得到5
javascript、angular7
我的指令出错了。我只是想显示颜色时，我悬停r文本。
better-highlight.directive.ts
import { Directive, OnInit, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit{
constructor(private elRef: E
浏览 0提问于2019-06-10得票数 0
回答已采纳
1回答
组件自动更改其在angular 6中的位置
angular
目前，我正在开发基于用户角色的angular application.More，超过6个组件被加载到仪表板中。我使用col来拆分dashboard.The中的组件大小。问题是基于role.If的一些组件对用户隐藏。组件的空间仍然保持不变，它没有对齐。我想用当前可用的下一个组件替换这些空间。
dashboard.html：
<div class="row">
<div class="col-lg-4">
<app-date-update *ngIf="isAdminLogin"></app-da
浏览 2提问于2018-11-24得票数 0
1回答
为变换动画计算包含动态内容的div的高度
css、angular
我有一个具有固定起始高度的容器，它只覆盖<ul>容器(参见HTML/JS)。如果按钮/链接被按下，这个容器应该通过向container目录添加一个类来扩展，并扩展到适合整个容器的内容。这可以通过使用属性height: auto来实现，但是，如果我想要一个过渡效果，例如transition: height 0.2s ease-in auto属性不起作用。需要注意的是，<ul>下面的内容是动态的。因此，它可能比这里看到的要多得多。那么如何获得容器的高度，并将其输入到Angular CSS类(我使用的是is-active )？ HTML/JS： <div [ngCla
浏览 9提问于2020-08-12得票数 0
1回答
在angular 4应用程序中以编程方式引入行间距
html、angular
我正在实现angular 4应用程序。我正在尝试以表格格式显示数据，我已经在一定程度上做到了这一点，但需要在特定行中引入空格。例如，我需要在写完净保费后介绍空间。我可能不得不以程序语法的方式来做。我该如何做到这一点。
html代码
<!-- Card -->
<div class="card">
<!-- Financial Statement -->
<div class="card-header" role="tab" id="fs_heading">
浏览 4提问于2018-06-01得票数 0
2回答
根据角色和权限隐藏/显示组件中的菜单和元素
javascript、html、jquery、angular
我也在使用一个angular应用程序实现登录。我维护了menu-items.ts，我可以从中获取我的所有菜单&遍历它们并显示它们。我在登录时收到菜单名称和权限“读/写”。现在我想隐藏/显示基于角色和权限的组件中的菜单和元素。怎样才能达到同样的效果呢？孩子气地引导我。 const MENUITEMS: IMenuItem[] = [
{
name: 'Admin',
type: 'main',
icon: 'apps',
isActive: true,
isMenuActive: false
浏览 31提问于2021-03-23得票数 0
2回答
如何根据值更改角度中的颜色
angular、typescript、angular-material
如何根据angular typescript模板中的值动态更改颜色？谢谢你们的帮助。非常感谢。 例如，如果item.status == 'Active' && ang item.role == 'Admin'将颜色设置为color:#00B0D，否则将颜色设置为#707070 <mat-icon aria-hidden="false" aria-label="Example home icon"
style="
浏览 28提问于2021-07-09得票数 0
2回答
Angular 5类不适用于ngClass指令
angular、angular5、ng-class
HTML中的所有函数都会被调用，但类不会被附加。所有类都在.css文件中定义。此组件驻留在另一个组件中。任何人都能看到哪里出了问题，为什么没有应用类吗？
如果对.addClass()或.removeClass()使用jQuery，则会添加/删除类。但是我想使用Angular工具，而不是直接使用DOM操作。
这是我的组件
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
@Component({
selector: 'app-popup',
te
浏览 0提问于2018-04-20得票数 0
3回答
我可以在一个角的“angular”语句中生成css代码吗？
css、angular
因此，我在角度if语句方面有问题，我想写一个css代码行，以防if语句为false。有人能帮我吗？
以下是HTML文件代码中的代码：
<div *ngIf="city.length < 16; else BigName">{{city}}</div>
<ng-template #BigName>
.desktopCityFilterName {
padd
浏览 4提问于2020-03-23得票数 1
回答已采纳
1回答
动画ng-容器
angular、angular-animations
我正在开发一个更大的应用程序，我们正在使用延迟加载模块。加载模块之后，在某些情况下，组件会被呈现到<ng-container><ng-container>中。问题是，在容器上定义的动画没有被调用。
我创建了一个虚拟的stackblitz示例来演示我的意思：
app.component.html:
<ng-container *ngIf="visible" [@myAnimation]>
<hello [ngStyle]="{'top': '50px'}" name="not
浏览 1提问于2019-09-12得票数 3
3回答
角2:如果根路由不活动，则移除类
angular、typescript、angular-cli
对于特定的路由，我只了解如何使用*ngIf删除整个元素，即。
假设我只为routerLink="/"应用了一个应用程序(头)元素的类，这意味着如果我切换到"/other-page"，我需要报头来丢失这个类。
我怎样才能做到这一点？
如何将[ngClass]链接到路由更改？
代码：
import { Component, ElementRef, ViewChild, Renderer, AfterViewInit, Input } from '@angular/core';
import { LayoutService } from 'a
浏览 4提问于2017-03-31得票数 3
2回答
当条件满足时，边界不会隐藏
javascript、html、css、angular
我试图定义一个显示信息区域的角分量。当满足条件时，这种情况会消失。这部分起作用，但边框始终保持不变，当满足条件时，其余的样式元素将被隐藏。
info-component-html
<div *ngIf="visible" >
<div class="s-help-content "><span [translate]="text"></span></div>
</div>
CSS：
.s-help{
background-repeat: no-repeat;
浏览 2提问于2022-08-22得票数 1
3回答
在创建组件时，放置[ngClass]=“class”和[ngStyle]=“样式”对元素做什么？
angular、typescript
我刚接触到角，当我在网上学习一些角度代码(如何制作组件)时，我偶然发现了以下内容：
@Component({
selector: 'app-okra-button',
template: `<button [ngClass]="class" [ngStyle]="style" (click)="pay()">Init Okra</button>`,
})
但是我不理解在按钮模板中使用[ngClass]="class" [ngStyle]="style"的用法。它是
浏览 5提问于2019-10-28得票数 1
回答已采纳
1回答
如何一次只允许选择一项
html、typescript、angular5
Angular 5-打开(单击)当一个节点处于活动状态时，所有其他节点都需要处于非活动状态。选定的节点将变为绿色( CSS -ngClass中的“active”)，而所有其他不是当前选定节点的节点将变为黑色。
这是我的HTML和typescript HTML：
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-8" (contextmenu)="onRightClick($event, node)">
<div class="
浏览 0提问于2018-05-16得票数 0
2回答
素描如何内联样式复选框？
html、primeng、primeng-checkbox
如何使用style输入的p-checkbox来更改复选框的边框和背景色？我已经试过[style]="{'background': '#ff0000'}"了。但这只会将样式应用于保存实际复选框的div。所以没什么用。相反，我需要更改div的border-color和background，后者有类p-checkbox-box和p-highlight。注:我不能使用CSS在这里，因为颜色是动态的和依赖于内容。
浏览 15提问于2022-12-02得票数 0
1回答
带有按钮的菜单手风琴
angular、typescript
事实上，当我单击菜单时，例如administration内容
我点击切换按钮
按钮被激活。
我再次单击按钮切换。
这是我的问题，有一个空行<li>补充。
我怎样才能移除这个空行？
dashboard.component.html
<div class="sidebar" [ngClass]="{ active: showSideBar }">
<div class="logo-details">
<span class="logo_name">
浏览 1提问于2022-03-18得票数 0
5回答
角度理解语法中的ngClass
angular、ng-class
我正在研究一些代码，我发现了这样的语法：
<div class="test" [ngClass]="{'active': isOverlay, 'on-page': onPage, 'spinner': showLoader, 'scroll': alphabetScroll}">
我想弄明白这是怎么回事，但我做不到。ngClass是怎么回事？任何帮助都是非常感谢的。
浏览 0提问于2018-10-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
