Добавить активный класс к элементу во вложенном ngFor Angular 6 - PullRequest
Новая
       10

Добавить активный класс к элементу во вложенном ngFor Angular 6

0 голосов
/ 19 сентября 2018

Я хотел бы добавить активный класс после щелчка, и у меня проблема с ngFor внутри ngFor.Когда я кликаю по одному радио, активный класс добавляется во все строки, потому что это одно и то же имя.Кроме того, теперь я могу нажать только для одного радио, я хочу нажать для одного радио в ряду (я не знаю, как сделать радио независимым друг от друга между рядами)

Я хочу добавить активныйкласс независим от строк, например, я хочу выбрать test1 из Lorem, test2 из Ipsum и test1 из dolor.Теперь я могу выбрать только одно радио из всех элементов.

Мой пример https://stackblitz.com/edit/angular-aupnma?file=src%2Fapp%2Fapp.component.ts

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

У вас есть 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

0 голосов
/ 19 сентября 2018

ОБНОВЛЕНИЕ , как предложил Али Шахбаз сгруппировать входы для флажков

Вы можете попробовать что-то подобное в 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;
  };
}
...