使用 ngIf 的 Angular ngStyle 动态样式元素

Question

我正在开发应用服务器身份验证和数据库搜索引擎中的动态样式元素功能。

searchNoResult 时，UI 为：

当点击按钮触发execSearch()事件->searchSuccess为真，模板searchSuccessColor生效（文本背景颜色变为粉红色）。 但是，我似乎无法获得动态样式的颜色：

我尝试将模板设置如下，但不起作用：

<button class="button" 
    [disabled] = "!enableSearch"
    (click) = "execSearch()">Search State</button>
    <div *ngIf = "searchSuccess; then searchSuccessColor else searchNoResult"></div>
<ng-template #searchNoResult>
    <p>{{ stateSearchResult }}</p>
</ng-template>
<ng-template #searchSuccessColor>
    <div [ngStyle]="{backgroundColor: 'pink'}"></div>
        <p>{{ stateSearchResult }}</p>
</ng-template>

我厌倦了下面的组件方法但不起作用：

  setColor() {
    return this.searchSuccess === true ? 'pink' : 'black';
  }

有人可以帮助找出问题所在吗？

Answer 1

如果 else 块仅用于为背景着色，则可以使用 [style.background-color] 和三元运算符完全跳过它。试试下面的

<div [style.background-color]="searchSuccess ? 'pink' : ''"><p>{{ stateSearchResult }}</p></div>

或者如果你想使用ngStyle（可能包含更多样式），那就是

<div [ngStyle]="{'background-color': searchSuccess ? 'pink' : ''}"><p>{{ stateSearchResult }}</p></div>

或者您也可以使用 ngClass 有条件地包含 CSS 选择器。

app.component.css

.highlight {
  background-color: pink;
}

app.component.html

<div [ngClass]="{highlight: searchSuccess}"><p>{{ stateSearchResult }}</p></div>

更新：使用控制器中定义的变量

如果您不想硬编码颜色值，您可以尝试在控制器中定义一个变量来保存颜色值。

控制器

export class AppComponent implements OnInit {
  backgroundColor = 'pink';

  // button `click` event handler
  execSearch() {
    ...
    this.backgroundColor = searchSuccess ? 'pink' : 'black';
  }
}

模板

<div [style.background-color]="backgroundColor">
  <p>{{ stateSearchResult }}</p>
</div>

<div [ngStyle]="{'background-color': backgroundColor}">
  <p>{{ stateSearchResult }}</p>
</div>

请注意此处backgroundColor 周围缺少单引号。它表示控制器中的变量。像'pink' 这样的单引号值表示字符串文字。

ngClass

CSS

.highlight-pink {
  background-color: pink;
}

.highlight-black {
  background-color: black;
  color: white;
}

模板

<div [ngClass]="searchSuccess ? 'highlight-pink' : 'highlight-black'">
  <p>{{ stateSearchResult }}</p>
</div>