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

问题描述

您好，我创建了stackblitz https://stackblitz.com/edit/angular-fnvhnn-giypgb?file=app%2Fexpansion-overview-example.html作为参考，我使用扩展面板来扩展内容，例如，单击clickstrong中的扩展元素，例如，单击 All 元素上方的内容将得到扩展，如果单击 B 元素，则 B 内容将得到扩展。

如果我单击全部，则我想在 {{tab}} 的顶部循环中使用 ngstyle或ngclass 标签，应将其更改为绿色，如果再次单击相同的 All 标签，则应将其更改为红色，如果我们单击 B 标签，应再次将其更改为绿色，如果单击相同的 B 标签，则应将其更改为红色，如切换。>

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

面板打开状态：-

panelOpenState = false;

顶部ngfor循环；-

<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);
      }
    }

解决方法

您可以通过使用如下所示的 ngClass 来实现此目的，

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

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

请参考此工作示例demo

我认为最好的可读性是这样的：

<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>

Working StackBlitz

使用标签名添加数组的简单方法

2020-11-11T11:25:41.486921+00:00 app[web.1]: {
2020-11-11T11:25:41.486931+00:00 app[web.1]: instaLogin: '----',2020-11-11T11:25:41.486932+00:00 app[web.1]: instaPassword: '-----',2020-11-11T11:25:41.486932+00:00 app[web.1]: unfollowCount: '2'
2020-11-11T11:25:41.486932+00:00 app[web.1]: }
2020-11-11T11:25:42.982298+00:00 app[web.1]: instagram page openss

2020-11-11T11:26:11.458619+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=POST path="/unfollow" host=inzzbuild.herokuapp.com request_id=ad36fd4e-42b4-47b6-951b-fd76b19d186a fwd="188.146.1.0" dyno=web.1 connect=0ms service=30001ms status=503 bytes=0 protocol=https
2020-11-11T11:26:18.986968+00:00 app[web.1]: TimeoutError: waiting for XPath `/html/body/div[2]/div/div/div/div[2]/button[1]` failed: timeout 30000ms exceeded
2020-11-11T11:26:18.986979+00:00 app[web.1]: at new WaitTask (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:411:34)
2020-11-11T11:26:18.986980+00:00 app[web.1]: at DOMWorld.waitForXPath (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:336:26)
2020-11-11T11:26:18.986981+00:00 app[web.1]: at Frame.waitForXPath (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/FrameManager.js:866:51)
2020-11-11T11:26:18.986981+00:00 app[web.1]: at Page.waitForXPath (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:1325:33)
2020-11-11T11:26:18.986982+00:00 app[web.1]: at Object.unfollow (/app/scraper.js:113:20)
2020-11-11T11:26:18.986983+00:00 app[web.1]: at async /app/routers/index.js:184:25
2020-11-11T12:00:43.633705+00:00 heroku[web.1]: Idling
2020-11-11T12:00:43.635767+00:00 heroku[web.1]: State changed from up to down
2020-11-11T12:00:44.399801+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-11-11T12:00:44.493777+00:00 heroku[web.1]: Process exited with status 143

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

第二次更新模板文件，如下所示：

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

ngStyle当将选项卡名称等于panelOpenState，这将达到目的触发。

angular ng-class ng-style