时间戳

首页 > 解决方案 > 单击时将 div 的角度设置为不同的颜色

html - 单击时将 div 的角度设置为不同的颜色

问题描述

所以虽然我的问题听起来很熟悉，但情况有点不同。我有一个包含多个任务的屏幕。为了显示我通过数据迭代的任务，我的代码看起来像

  

  <div *ngFor="let task of tasks" class="scheduleContainer inline-block shadow">
      <div id="myHeader" #myHeader class="activeHeader">
        {{task.title}}
      </div>
      <div class="detailsBox">
        <div class="row">
          <div class="offset-md-1 col-md-auto">
            Last Date:
          </div>
          <div class="col-md-auto">
            {{task.lastDate}}
          </div>
        </div>
        <div class="row">
          <div class="offset-md-1 col-md-auto">
            Duration:
          </div>
          <div class="col-md-auto">
            {{task.duration}}
          </div>
        </div>
        <div class="row">
          <div class="offset-md-1 col-md-auto">
            Total Runs:
          </div>
          <div class="col-md-auto">
            {{task.totalRun}}
          </div>
        </div>
      </div>
      <div class="footer">
        <a [routerLink]="['edit-scheduled-tasks']">edit schedule</a> &nbsp;
        <a [routerLink]="['view-history-scheduled-tasks']">view history</a> &nbsp;
        <a (click)="onClick()">enable task</a> &nbsp;
        <a href="" *ngIf="flag==task.isRunNow">run now</a>
      </div>
    </div>

    <router-outlet></router-outlet>

现在，当我单击启用的任务时，我希望更改该特定 div 的颜色。在我的组件中，我尝试了类似

   onClick() {
        this.myHeader.nativeElement.style.background = 'red';
      }

所以这确实改变了颜色，但它没有改变当前任务，而是改变了其他一些任务。建议？

标签： htmlangular

解决方案

你可以myHeader从模板访问，这样你就可以改变这样的颜色

  <div id="myHeader" #myHeader class="activeHeader">
        Change the color by myHeader variable
  </div>

  <button (click)="myHeader.style.background='red'">click</button>

或者您可以像这样使用带有ngStyle的属性

<div [ngStyle]="{'background-color':color}" >
          Another way by ngStyle
 </div>

 <button (click)="color='red'">click</button>

或者你可以使用一个属性来用ngClass切换类

<div [ngClass]="{'red':isClicked}" >
  Set class 
</div>

<button (click)="isClicked=!isClicked">Toggle class</button>

使用ngClass切换 taskList 的颜色示例

模板 

<div *ngFor="let task of taskList" 
    [ngClass]="{'red':selectedTasks[task.id]}" 
    (click)="selectedTasks[task.id]= !selectedTasks[task.id]" class="task">
   {{task.name}}
</div>

或者您可以使用按钮来切换状态

<div *ngFor="let task of taskList" 
    [ngClass]="{'red':selectedTasks[task.id]}" 
     class="task">
   {{task.name}} 
   <button (click)="selectedTasks[task.id]= !selectedTasks[task.id]">toggle {{task.name}}</button>
</div>

如果您想设置状态而不切换点击事件，只需像这样将状态设置为 trueselectedTasks[task.id] =true

零件

  taskList =[
    {id:1 , name:'Task 01'},
    {id:2 , name:'Task 02'},
    {id:3 , name:'Task 03'},
    {id:4 , name:'Task 04'},
    {id:5 , name:'Task 05'},
  ];

  selectedTasks = {};

stackblitz 演示

推荐阅读