无涯教程网

Angular 如何应用 [ngStyle] 条件

发布于03月14日

我有一个要根据条件设置样式的div.

如果styleOne是真的，我想要一个红色的背景色.如果StyleTwo为真，我希望背景 colored颜色为蓝色.我有一半的代码在使用下面的代码.

    <div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}">

是否可以添加一个条件来说明:

如果style One为true，请执行以下操作
如果style Two为真，请执行此操作？

Edit

我想我已经解决了.它起作用了.我不确定这是不是最好的方法:

<div id="div" [ngStyle]="styleOne && {'background-color': 'red'} || styleTwo && {'background-color': 'blue'}">

推荐答案

对于单个样式属性，可以使用以下语法:

<div [style.background-color]="style1 ? 'red' : (style2 ? 'blue' : null)">

我假设如果style1和style2都不是true，则不应该设置背景色.

由于问题标题提到ngStyle，以下是该指令的等效语法:

<div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }">

Angular相关问答推荐

如何在每次Angular 编译之前执行脚本(esbuild)

Primeng 12Angular 12自定义库：错误符号字段集声明于...在编译保存后未从Primeng/fieldset中导出

Angular router-outlet 未渲染

如何从URL中角下载图片？

角路径S异步旋转变压器仍可观察到

在 Angular material 表单元格中渲染 html

在父组件的子组件中使用 ng-template

如何将我的数组数据转换为逗号分隔的字符串

最新版本的 Chrome ERR_TIMED_OUT

rxjs 这种常见的状态管理模式有名称吗？它有限制吗？

为什么 HttpParams 在 Angular 4.3 中的多行中不起作用

使用directive指令将类添加到host元素中

如何在 Angular 5 HttpInterceptor 中添加多个标头

Angular 2.0 中 $scope 的替代品

Angular 没有可用于依赖类型的模块工厂：ContextElementDependency

取消订阅服务中的http observable

EmptyError： no elements in sequence

Angular 2 - 组件内的 formControlName

ConnectionBackend 没有提供程序

ng build 时超出调用重试次数异常

实用课程推荐

相关教程推荐