Angular document.getElementById and style.display

Question

有人可以快速告诉我如何在 Angular 中使用以下内容吗？是否有等效的，或者我可以按原样使用吗？

document.getElementById("overlay").style.display = "none";

Answer 1

在 HTML 中使用 *ngIf：

<div *ngIf="yourBooleanVariable">...</div>

现在，如果在 component.ts 中将 "yourBooleanVariable" 设置为 false，则div 将不会呈现。如果将该值更改为 true，将显示该div。

如果只想更改样式，请使用 NgStyle。

例：

<div [ngStyle]="{'background-color': yourVariable === 'condition' ? 'color1' : 'color2' }"></<div>

这称为三元运算符，其内容如下：

如果"您的变量"="条件"，则背景颜色设置为"color1"，否则背景颜色将设置为"color2">