Установка 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

Не чистый способ сделать, но он все еще работает.Отправьте 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 2

Непрактично манипулировать DOM напрямую.
Angular: Stop manipulating DOM with ElementRef!

В качестве альтернативы, легко связать встроенный стиль в вашем Angularшаблоны с использованием style привязки.

Поскольку вы хотите, чтобы цвет этого конкретного 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

Answer 3

вы можете получить доступ к 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>

Пример переключения цвета TaskList с помощью ngClass

template

<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