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

我想在单击后添加活动类，但我对ngFor内部的ngFor有问题。当我点击一个收音机时，活动类被添加到所有行中，因为它的名称相同。此外，现在我只能单击一个收音机，我想单击行中的一个收音机（我不知道如何使两行之间的收音机相互独立）

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

---

我的示例

更新，正如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>

---

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

您有两个问题：

• 您的收音机没有每个测试的通用名称（因此只能选择一个）

• 仅保留一个选定项，因此只能将类应用于一个项）

修改component.ts以保存所选项目

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>

{{item}}

您有两个问题：

• 您的收音机没有每个测试的通用名称（因此只能选择一个）

• 仅保留一个选定项，因此只能将类应用于一个项）

修改component.ts以保存所选项目

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>

{{item}}

---

ok的可能重复，它解决了活动类的问题，但仍然是独立单选按钮的问题。我想可以从Lorem中选择例如test1，从Ipsum中选择test2，从dolor中选择test1。现在我只能从所有元素中选择一个单选项。像这样设置元素的名称

name=“something{{test.id}”

ok，它解决了活动类的问题，但仍然是独立单选按钮的问题。我想可以从Lorem中选择例如test1，从Ipsum中选择test2，从dolor中选择test1。现在我只能从所有元素中选择一个收音机。为元素设置名称，如下所示

name=“something{{test.id}”