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

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>

使用ng Class切换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>

如果你想在没有切换点击事件的情况下设置状态，只需将状态设置为true，就像这个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

Answer 2

不是一个干净的方法，但它仍然有效。将选定元素的index发送到onClick(i)并将颜色添加到选定的div。这样你就不会乱用模板参考。

HTML

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

component.ts

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

DEMO

Answer 3

直接操作DOM不是一个好习惯。 Angular: Stop manipulating DOM with ElementRef!

作为替代方案，使用style绑定很容易在Angular模板中绑定内联样式。

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

零件：

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

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

迭代时将index传递给onClick(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;

Live Demo