OnClick 使用 Angular 更改背景颜色

Question

我有 ul 标签，当用户单击列表时，背景颜色必须更改为其他颜色 color.I 我正在使用 Angular7 并且是新手。我怎样才能做到这一点。

HTML:

<ul class="horizontal" id="nav">
  <li><a class="active">Draft</a></li>
  <li><a>Planned</a></li>
  <li><a>Started</a></li>
  <li><a>Suspended</a></li>
  <li><a>Ended</a></li>
</ul>

css:

ul.horizontal li {
  float: left;
}

ul.horizontal {
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #E2E2E2;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

ul.horizontal li a {
  color: #000;
  display: block;
  position: relative;
  line-height: 32px;
  padding: 0 16px 0 32px;
  white-space: nowrap;
  border-right: 1px solid #ccc;
}

ul.horizontal li a.active {
  background-color: #0275E7;
  color: #ffff;
  // background-color: rgb(201, 205, 248);
}

Answer 1

试一试：

<ul class="horizontal" id="nav">
  <li 
    *ngFor="let state of states"
    (click)="setStateAsActive(state)">
    <a [class.active]="state === activeState">
      {{ state }}
    </a>
  </li>
</ul>

在你的 TS Class:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  activeState = 'Draft';

  states = [
    'Draft',
    'Planned',
    'Started',
    'Suspended',
    'Ended',
  ]

  setStateAsActive(state) {
    this.activeState = state;
  }

}

Here's a Working Sample StackBlitz for your ref.

OnClick 使用 Angular 更改背景颜色

OnClick change the background color using Angular

html

css

typescript

angular

angular7