ngClass和ngStyle指令onclick元素的颜色是否需要改变角度

Question

大家好，我创建了stackblitzhttps://stackblitz.com/edit/angular-fnvhnn-giypgb?file=app%2Fexpansion-overview-example.html作为参考，我使用了扩展面板对内容进行了扩展，基于单击堆栈中发生的元素扩展，例如，如果我们单击顶部的All元素，则All内容将被扩展，如果我们点击B元件，则B内容将得到扩展。

我确切的意思是，我想在{{tab}}的顶部循环中使用ngstyle或ngclass，如果我们单击All标签，它应该变为green；如果再次单击相同的All标记，它应该变成红色，如果我们单击B标签，它应该再次变为绿色如果单击相同的B标记，它应该像切换一样变为红色。

如果panelstate=false标签应为红色，如果为true则需要更改绿色

面板打开状态：-

panelOpenState = false;

循环顶部-

<div style="display: flex;justify-content: space-evenly;">
<div *ngFor="let tab of getTablist();"> <p  (click)='clickOntab(tab)' [ngStyle]="{'color':panelOpenState === 'true' ? 'green' : 'red' }">{{tab}}</p></div>
</div>

Ts文件

panelOpenState = false;
public tabType: string = "";

clickOntab(tab) {
if (this.tabType != "" && this.tabType === tab) {
this.panelOpenState = false;
this.tabType = "";
} else {
this.panelOpenState = true;
this.tabType = tab;
}
}

getTablist() {
const tabList = this.cricketList.map(list => list.alphabet);
return ["All"].concat(tabList);
}
}

Answer 1

您可以使用ngClass来实现这一点，如下所示，

[ngClass]="(panelOpenState===true)?'greenClass':'redClass'"

截至目前，所有选项卡的ngClass都绑定到单个属性panelOpenState，因此所有选项卡都在更改颜色，但您应该将每个选项卡的打开或关闭状态分别存储在某个数组中。这样，只有打开的标签是绿色的，反之亦然。

参考此工作示例演示

Answer 2

我认为可读性最好的灵魂是：

<div style="display: flex;justify-content: space-evenly;">
<div *ngFor="let tab of getTablist();">
<p (click)='clickOntab(tab)' [class.redClass]="!panelOpenState" [class.greenClass]="panelOpenState">
{{tab}}
</p>
</div>
</div>

Answer 3

工作StackBlitz

一种添加标签名为的数组的简单方法

tab = ["ALL", "A", "B", "C"];
panelOpenState = "";

并使panelOpenState存储打开的选项卡名称。

其次更新模板文件如下：

<div style="display: flex;justify-content: space-evenly;">
<div *ngFor="let tab of getTablist();">
<p (click)='clickOntab(tab)'
[ngStyle]="{'color':panelOpenState === tab ? 'green' : 'red' }">{{tab}}</p>
</div>

当选项卡名称等于panelOpenState时，ngStyle将触发，这将起到作用。