Question

我需要从json数组创建一个单选按钮的动态列表。我能够做到这一点，但要求是为其分配动态ID。我的JSON数据如下：

this.employees = [{
      employeeId: 1,
      employeeName: 'Mark Hunt',
      imageURL: '',
      rating: 0,
      group: 'Training'
    }, {
        employeeId: 2,
        employeeName: 'Dave Piana',
        imageURL: '',
        rating: 0,
        group: 'Technical'
      }];

我期望的输出是：

<div class="row">
  <fieldset class="rating">
    <input type="radio" id='radio_1_5' name="Training" value="5" />
    <input type="radio" id="radio_1_4" name="Training" value="4" />
    <input type="radio" id="radio_1_3" name="Training" value="3" />
    <input type="radio" id="radio_1_2" name="Training" value="2" />
    <input type="radio" id="radio_1_1" name="Training" value="1" />
  </fieldset>
  <fieldset class="rating">
    <input type="radio" id='radio_2_5' name="Technical" value="5" />
    <input type="radio" id="radio_2_4" name="Technical" value="4" />
    <input type="radio" id="radio_2_3" name="Technical" value="3" />
    <input type="radio" id="radio_2_2" name="Technical" value="2" />
    <input type="radio" id="radio_2_1" name="Technical" value="1" />
  </fieldset>
</div>

该循环应迭代雇员的数量，并且应为每个雇员生成5个单选按钮。每个单选按钮的“ Id”应采用以下格式：“ radio _” + employee.employeeId +“ index”，其中索引将从5开始，以1结尾。

关于如何实现这一目标的任何想法将非常有帮助。

Answer 1

尝试一下：

<fieldset class="rating" *ngFor="let emp of employees">
    <input type="radio" id='radio_{{emp.employeeId}}_{{index}}' name="{{emp.group}}" value="{{index}}" *ngFor="let index of [5,4,3,2,1]"/>
</fieldset>

Angular6：使用ID创建单选按钮的动态列表

1 个答案: