根据第一列中选​​择的内容启用第二列中的单选按钮

Question

我有一个JSON，它以表格格式呈现，内容作为单选按钮。仅当启用第一列的第一项时，才应启用第二列的前两项，依此类推。 例如：-如果选择了John，则应在第二栏中启用Doe，Anna.Rest all应该被禁用 有人可以帮我吗

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

在循环中使用索引，并按索引更改名称

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

Answer 2

要获得预期结果，请使用以下选项

1. 创建数组以存储要启用的无线电的索引

   enableArr = [];

2. 对第一列使用change事件，并根据第一列的选择将索引推送到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：是;
         }

工作代码示例-https://stackblitz.com/edit/angular-7gguqf?file=src%2Fapp%2Fapp.component.ts