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

Question

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

  

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

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

Answer 1

您可以从模板访问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 切换任务列表颜色的示例

模板

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

if you want to set the state without toggle on click event just set the state to true like this selectedTasks[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 demo