反应形式的角度模型单选按钮

Question

我有一组需要显示的数组，它们在彼此之间显示。首先是“角色”下拉菜单，选择一个角色后，将显示“服务”列表，在每个服务中，将显示一组单选按钮（“权限”）。每个角色都显示相同的服务和权限。

目前，我的身份是：

    <div class="card-body form-styles">
  <form [formGroup]="rolePermissionForm" autocomplete="off" novalidate>
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <select formControlName="ROLE_ID" class="form-control">
            <option [ngValue]="null">--SELECT--</option>
            <option *ngFor="let role of roleList" [value]="role.ROLE_LOOKUP_ID">{{role.DESCRIPTION}}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row" *ngIf="rolePermissionForm.controls['ROLE_ID'].value">
      <div class="col-md-4">
        <div class="form-group">
          <div class="card" *ngFor="let service of serviceList">
            <div class="card-header">
              {{service.DESCRIPTION}}
            </div>
            <div class="card-body">
              <div *ngFor="let permission of permissionList">
                <input type="radio" formControlName="PERMISSION_ID_{{service.SERVICE_LOOKUP_ID}}" [value]="permission.LOOKUP_ID">{{permission.DISPLAY_VALUE}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

到目前为止，表单显示良好，我的模型是：

    export class RolePermissionModelForm {
  ROLE_ID = 0;
  PERMISSION_ID_1 = '';
  PERMISSION_ID_2 = '';
  PERMISSION_ID_3 = '';
  PERMISSION_ID_4 = '';
  PERMISSION_ID_5 = '';

我不喜欢这样对值进行硬编码，目前有5个服务，每个PERMISSION_ID_＃应该与一个服务的选择相关。如果将来添加更多，我将需要更新它，是否有更好的方法来构建它们？我是否也为单选按钮PERMISSION_ID _ {{service.SERVICE_LOOKUP_ID}}正确绑定formControlName？我需要确保对每种服务都可以允许用户选择一个权限并将其保存，因此我需要捕获每种服务的单选。