setActive ngClass angular

Question

你好，我有一个简单的 angular 组件的问题，我使用反应形式插入文本，然后在我想通过单击设置活动元素后使用 ngFor 循环文本但是当我单击一个元素，所有元素都激活 class，这是我的模板。这是 stack blitz link

<form [formGroup]="colorsForm">
  <div>
    <label for="colorName">Color Name</label>
      <input id="colorName" type="text" class="form-control" 
        formControlName="colorName" name="colorName"/>
  </div>
  <button  type="button"  (click)="addCorlo()">ADD</button>
</form>
<div
*ngFor="let color of colorsList; let i = index"
(click)="setActive(color)"
[ngClass]="{'active' : color.i === active?.i}"
>
<div
> ID {{ i }} - color {{ color.colorName }}<button (click)="delete(i)">DELETE</button></div>
</div>

这是我的 ts

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Set Active';
  colorsForm: FormGroup; // New Reactive Form
  colorsList: any[] = [];
  active: any;


  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {

    this.colorsForm = this.fb.group({
      colorName: [null]
    });

  }

  addCorlo() {
    if (this.colorsForm.valid) {
      let color = { 
        colorName: this.colorsForm.value.colorName,
      };
      this.colorsList.push(color);
    }
    this.colorsForm.reset();
   }


   delete(i: number) { 
    if (i > -1) {
        this.colorsList.splice(i, 1);
        console.log('ID',i)
        console.log('ARRAY',this.colorsList)
    }
    return this.colorsList;

  }

  setActive(color: any){
    console.log(color);
    this.active = color;
  }


}

Answer 1

您的支票有误。颜色或活动对象中没有名为 i 的属性。

到位，可以直接对比对象

[ngClass]="{'active' : color === active}"

Answer 2

[ngClass]="{'active' : color.colorName === active?.colorName}"

此检查需要特定于 colorName。

setActive ngClass angular

setActive ngClass angular

ng-class

angular