将 active class 添加到嵌套 ngFor Angular 6 中的元素

Question

我想在点击后添加 active class，我对 ngFor 里面的 ngFor 有问题。当我点击一个收音机时，active class 被添加到所有行，因为是相同的名称。此外，现在我只能点击一个radio，我想点击一行中的一个radio（我不知道如何让radio在行之间相互独立）

我想在行之间添加独立的活动 class，例如，我想从 Lorem 中选择 test1，从 Ipsum 中选择 test2，从 dolor 中选择 test1。现在我只能从所有元素中选择一个收音机。

我的例子https://stackblitz.com/edit/angular-aupnma?file=src%2Fapp%2Fapp.component.ts

Answer 1

更新正如 Ali Shahbaz 建议对复选框输入进行分组

你可以试试这样的在 app.component.html

    <div class="row" *ngFor="let test of tests">
      <input type="checkbox"
        id="">
        {{test.name}} 
      <div class="btn-group">
        <label class="btn btn-outline-secondary"
          *ngFor="let item of test.items"
          (click)="selectItem(item,test.id)"
          [ngClass]="{active: isSelectedItem(item) && selectedId==test.id}">
          <input
          type="radio"
          name="something{{test.id}}"/>
          {{item}}
        </label>
      </div>
    </div>

在app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tests: any[];
  selectedItem: any;
  selectedId:number;

  constructor() {
    this.tests = [{
      id: 1, name: 'lorem', items: ['test1', 'test2', 'test3']
    },
    {
      id: 2, name: 'ipsum', items: ['test1', 'test2', 'test3']
    },
    {
      id: 3, name: 'dolor', items: ['test1', 'test2', 'test3']
    }]

  }

  selectItem(item,id) {
    this.selectedItem = item;
    this.selectedId=id;
  }

  isSelectedItem(item) {
    return this.selectedItem === item;
  };
}

Answer 2

您有 2 个问题：

您的收音机没有为每个测试使用通用名称（因此总共只能select一个）
您只能保留一件 selected 物品，因此您只能将 class 应用于一件物品）

修改 component.ts 以保存 selected itemS

selectedItems = {};
  selectItem(item, id) {
    this.selectedItems[id] = item;
      }

  isSelectedItem(item, id) {
    return this.selectedItems[id] && this.selectedItems[id] === item;
  };
}

修改您的模板以向您的收音机添加通用名称并更改活动检查 class

  <label class="btn btn-outline-secondary"
          *ngFor="let item of test.items"
          (click)="selectItem(item,test.id)"
          [ngClass]="{active: isSelectedItem(item, test.id) }">
          <input
          type="radio"
          name="something_{{test.id}}"/>
          {{item}}
        </label>

Stackblitz demo

将 active class 添加到嵌套 ngFor Angular 6 中的元素

Add active class to element in nested ngFor Angular 6

radio-button

ngfor

angular