включить переключатели во 2-м столбце в зависимости от содержимого, выбранного в первом столбце

Question

У меня есть JSON, который я отображаю в табличном формате с контентом в виде переключателей. Первые два элемента второго столбца должны быть включены, только если включен первый элемент первого столбца и т. Д. Таким же образом. Например: - Доу, Анна должна быть включена во 2-м столбце, если Джон в выбранном. Остальные все должны быть отключены Может ли кто-нибудь помочь мне с этим

HTML
    <div class="row" id="inputTableSector">
      <table id="inputTable" class="table table-striped">
        <thead>
          <tr>
            <td>first name</td>
            <td>last name</td>
            <td>manager</td>
            <td>domain</td>
            <td>Alpha</td>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let employee of employees;">
            <td><input type="radio" name="firstName" [value]="employee.firstName" [(ngModel)]="currentFirstName"><span>{{employee?.firstName}}</span></td>
            <td><input type="radio" name="lastName" [value]="employee.lastName" [(ngModel)]="currentLastName"><span>{{employee?.lastName}}</span></td>
            <td><input type="radio" name="manager" [value]="employee.manager" [(ngModel)]="currentManager"><span>{{employee?.manager}}</span></td>
            <td><input type="radio" name="domain" [value]="employee.domain" [(ngModel)]="currentDomain"><span>{{employee?.domain}}</span></td>
            <td><input type="radio" name="alpha" [value]="employee.alpha" [(ngModel)]="currentAlpha"><span>{{employee?.alpha}}</span></td>
          </tr>
        </tbody>
      </table>

TYPESCRIPT
    constructor(private http: HttpClient) { }
      protected employees: any;
      protected currentLastName: string;
      protected currentFirstName: string;
      protected currentManager: string;
      protected currentDomain: string;
      protected currentAlpha: string;
     ngOnInit() {
        // const employeesJSON = this.http.get("https://api.myjson.com/bins/tshu8").pipe(map(res => res.json()));
        // this.employees = JSON.parse(employeesJSON);
        this.http.get("https://api.myjson.com/bins/tbzpc").subscribe( 
        response => {this.employees=response}
        );
      }

    JSON
    [{"firstName":"John","lastName":"Doe","manager":"paul","domain":"digital"},{"firstName":"Anna","lastName":"Smith","manager":"Abraham","domain":"mechanics"},{"firstName":"Peter","lastName":"Jones","manager":"Jonathan","domain":"physics"},{"firstName":"Watson","lastName":"carter","manager":"Bravo","domain":"chemistry"},{"firstName":"","lastName":"Daniel","manager":"Pollock","domain":"biology"},{"firstName":"","lastName":"Smith","manager":"Tait","domain":"analogy"},{"firstName":"","lastName":"Queen","manager":"Mcgrath","domain":"mathematics"},{"firstName":"","lastName":"Elizebeth","manager":"Waugh","domain":"english"}]

Answer 1

Для достижения ожидаемого результата используйте опцию ниже

1. Создать массив для хранения индексов радиостанций, которые должны быть включены

   enableArr = [];

2. Использование события изменения для первого столбца и push-индексов для enableArr на основе выбора первого столбца

   enableColumn (e, i) {
   this.enableArr.indexOf (i) === -1? this.enableArr.push (i, i + 1): this.enableArr.push (i + 1, i + 2)
   }

3. Используйте свойство [disabled] для включения второго столбца на основе enableArr

   isDisabled (Val) {* * тысяча двадцать-один вернуть val> = 0? this.enableArr.indexOf (val) === -1: true;
   }

пример рабочего кода - https://stackblitz.com/edit/angular-7gguqf?file=src%2Fapp%2Fapp.component.ts

Answer 2

использовать индекс в цикле и изменение имени по индексу

<tr *ngFor="let employee of employees; let i = index;">
  <td><input type="radio" name="firstName-{{i}}" [value]="employee.firstName" [(ngModel)]="currentFirstName"><span>{{employee?.firstName}}</span></td>
  <td><input type="radio" name="lastName-{{i}}" [value]="employee.lastName" [(ngModel)]="currentLastName"><span>{{employee?.lastName}}</span></td>
  <td><input type="radio" name="manager-{{i}}" [value]="employee.manager" [(ngModel)]="currentManager"><span>{{employee?.manager}}</span></td>
  <td><input type="radio" name="domain-{{i}}" [value]="employee.domain" [(ngModel)]="currentDomain"><span>{{employee?.domain}}</span></td>
  <td><input type="radio" name="alpha-{{i}}" [value]="employee.alpha" [(ngModel)]="currentAlpha"><span>{{employee?.alpha}}</span></td>
</tr>