Question

如何在打字稿中的if语句中设置项目的背景色？我使用了querySelector，但答案可以使用任何方法来达到目的。

选择器为(.mat-step:nth-child(2) .mat-step-header .mat-step-icon-selected)。

这是stackblitz中的代码。

我将不胜感激！

Answer 1

stackblitz示例可能会有所帮助，但其中有很多内容可以概括您的要求，此答案是一种通用的方法，这意味着您可以将其应用于您认为合适的代码。< / p>

声明您为布尔值。

public value = true;

现在声明您要使用的CSS类。

.exmaple-class {
    background: red;
}

然后在要应用该类的所选HTML元素上。

<div [class.example-class]="value === true"></div>

或者只是

<div [class.example-class]="value"></div>

因为这仍然等于true。如果将value设置为false，则不会应用该类。

如果您要开始为特定元素构建更多的类和选项，可以查看Angular's ngStyle。

添加此内容，认为这也是您所要的，几乎没有什么不同。它仅在加载视图后运行，在您的示例中不起作用，因为尚未绘制HTML。

  public ngAfterViewInit(): void
  {
      this.changeColour();
  }

  public changeColour() {
      document.querySelector<HTMLInputElement>(".mat-step-icon-selected").style.backgroundColor = 'red';
  }
}

然后添加一个click事件，以确保每次选择某项时，选择器都会更新。

<div class="center-contrainer" (click)=changeColour()>

如何为打字稿中的元素设置样式？（角度）

1 个答案: