Question

我想在单击后添加活动类，并且ngFor内的ngFor存在问题。当我按下一个收音机时，活动类将添加到所有行，因为它是相同的名称。此外，现在我只能单击一个无线电，我想单击该行中的一个无线电（我不知道如何使行之间的无线电彼此独立）

我想在行之间添加独立的活动类，例如，我想从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个问题：

您的电台在每次测试中都没有通用名称（因此只能选择一个）
您只能保留一个选定的项目，因此您只能将课程应用于一个项目）

修改component.ts以保存选定的项目S

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

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

修改您的模板以在收音机中添加一个通用名称，并更改对活动班级的检查

  <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

将活动类添加到嵌套ngFor Angular 6中的元素

2 个答案: