Html 单击即可将角度中的div设置为不同的颜色

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

{{task.title}}
最后日期：
{{task.lastDate}
持续时间：
{{task.duration}
总运行次数：
{{task.totalRun}

您可以从模板中访问

myHeader

，这样您就可以像这样更改颜色

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

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

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

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

---

这不是一个干净的方法，但它仍然有效。将所选元素的

索引发送到
onClick（i）
，并将颜色添加到所选
div
。这样就不会弄乱模板引用

html

直接操作DOM不是一种好的做法。


作为替代方案，使用
style
binding可以轻松地在角度模板中绑定内联样式

因为您希望更改特定div的颜色。使用布尔数组：

组件：

 export class AppComponent  {
  name = 'Angular';
  public styleArray=new Array<boolean>(10);

  onClick(i)
  {
    this.styleArray[i]=true;
  }
}




{{task.title}}
……代码的其余部分
我想它改变了任务。标题？@tomerraitz不知道你的意思。。但是id为myHeader的div需要为单击的特定任务更改颜色。这将始终更改上一个任务的颜色，可能是因为每个任务都有相同的引用
myHeader
。请尝试（单击）=“onClick（This）”和onClick（el）{el.myHeader.style.background='red'；}是的，我的意思是我可以改变颜色，但因为我有多个任务，我点击了那个特定的任务，那么它应该只针对那个特定的任务，不是别的东西，我的代码正在更改标题的颜色，但用于其他任务。你需要根据任务id创建类似于flag的东西作为示例，并使用它切换类以更改颜色ngClass将正常工作，你明白我的意思了吗？我明白你的意思，让我继续，谢谢！我已经更新了我的答案，演示你可以查看任务列表示例@bshahI使用了“使用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>

  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 = {};

<div *ngFor="let task of tasks; let i=index;" class="scheduleContainer inline-block shadow">
    <div id="myHeader" #myHeader class="activeHeader">
        {{task}}
    </div>
    <div class="footer">
        <a (click)="onClick(i)">enable task</a> &nbsp;
    </div>
</div>

 onClick(index: number) {
     document.querySelectorAll('#myHeader')[index]
      .style.background = 'red';
  }

 export class AppComponent  {
  name = 'Angular';
  public styleArray=new Array<boolean>(10);

  onClick(i)
  {
    this.styleArray[i]=true;
  }
}

[style.color]="styleArray[i] ? 'green':'black'"  

  <div *ngFor="let task of tasks; let i=index" class="scheduleContainer inline-block shadow">
          <div id="myHeader" [style.color]="styleArray[i] ? 'green':'black'"  class="activeHeader">
            {{task.title}}
          </div>
........rest of the code
 <a (click)="onClick(i)">enable task</a> &nbsp;