如何在angular6中的onclick上更改按钮的CSS？

Question

我的网页上没有几个按钮。 单击时，我需要更改backgroundcolor和font-color。 我已经试过了

<div class="card-body">
<h6 class="card-text">Data</h6>
<button ion-button block (click)="viewMore('data');
   displayPopup('data');" >
   ViewMore</button>&nbsp;
   <button ion-button block (click)="display('data');" >Display</button>
 </div> 

同样，我还有几个div。 现在，我需要在单击它时更改viewmore按钮的css。

我的CSS：

button:focus{
 background-color: blue;
}
button:active{
background-color: red;
} 

现在它适用于第二个按钮，当我单击第一个按钮时，弹出窗口＆关闭弹出按钮后的css尚未更改。 有人可以建议我吗？

Answer 1

最简单的方法是像您一样使用CSS伪类。 对于单击或访问的元素，有:visited伪类。

您应该熟悉基本的CSS。 W3schools是一个很棒的资源。

因此，在您的情况下：

button:visited {
   background: red;
}

:focus就像上面所说的那样-表示具有焦点的元素。

要么：

button:active,
button:visited,
button:focus {
   background: red;
}

Answer 2

您的问题尚不清楚。 使用ngStyle或ngClass otr style.attrib的方式是使用变量和三元运算符。 由于有多个按钮，因此需要多个变量。 此变量可以是对象或数组的属性。 作为数组

//You have an array
buttonsClicked:boolean[];
//In your .html

   <!--use index 0 for the first button, index 1 for the second button... -->
    <button ionbutton block [style.background-color]="buttonsClicked[0]?'red':'green'"
            (click)="buttonsClicked[0]=true;
                    viewMore('data');displayPopup('data');" >
       ViewMore</button>&nbsp;
       ....
     </div>

//when you close the popup you can clear all the buttonsClicked
this.buttonsClicked=[] //<--reinit the array