Angular 表单数组访问静态数据

Question

我正在使用 Reactive Forms 创建一个页面来管理我的应用程序中的 Angular 色和权限。有多个复选框表可以打开或关闭 Angular 色的权限，我正在尝试使用 *ngFor 动态创建这些元素。问题是，我的表单元素只有一个 bool 值(开或关)，并且需要检索相应的元数据(显示名称、声明列表等)以正确显示元素。我的问题是，当我遍历表单控件集合时，我需要将其与 View 模型匹配(基本上需要在我的 html 模板中为模型和表单控件设置一个变量。
这是页面外观的示例:

这是我的表单生成器:

this.settingsForm = this.fb.group({
  roleName: this.exampleRole.name,
  dashboard: '',
  settingsPermissions: this.fb.array(this.settingsPermissions.map(perm => this.fb.group({
    name: perm.title, 
    permission: perm.val(this.exampleRole.permissions),
  }))),
  customerProfilePermissions: this.fb.group({
    //accessProfiles: {value: true, description:"Some test description", displayName: "Access Customer Profiles" },
    accessProfiles: true,
    accessPII: false,
    editProfiles: false,
    linkProfiles: false,

我的设置权限对象的示例定义:

export class PermissionConfiguration {
    title!: string;
    permissionClaims: string[] = [];
    description: string;
}

以及我的模板的示例:

<div *ngIf="settingsForm.get('customerProfilePermissions.accessProfiles').value">
   <div class="row">
       <div class="col-3 col-xl-2">Access To PII </div>
            <div class="col-3 col-xl-2"><k-checkbox formControlName="accessPII"></k-checkbox></div>
            <div class="col-3 col-xl-2">Ability to view customer personally identifiable information.</div>
        </div>
        <div class="row">
            <div class="col-3 col-xl-2">Edit Profiles </div>
            <div class="col-3 col-xl-2"><k-checkbox formControlName="editProfiles"></k-checkbox></div>
            <div class="col-3 col-xl-2">Ability to edit certain information on the customer profile tab. Editable fields are defined on a per-client basis during implementation.</div>
        </div>
        <div class="row">
            <div class="col-3 col-xl-2">Link Related Profiles </div>
            <div class="col-3 col-xl-2"><k-checkbox formControlName="linkProfiles"></k-checkbox></div>
            <div class="col-3 col-xl-2">Ability to add/remove related profiles in the top right of each customer profile.</div>
        </div>

我需要的是能够从组件中获取 PermissionConfiguration 对象以及表单控件。如果我能做到这一点，那么我可以替换名称和描述字段并使表单动态化。
在设置权限部分(不同的模型对象)中，我做了以下操作，但效率很低:

<tr formArrayName="settingsPermissions"
                    *ngFor="let info of settingsForm.get('settingsPermissions')['controls']; let i = index;">
   <ng-container [formGroupName]="i">
        <td>{{ getPermModel(info.value.name).title }}</td>
        <td><k-checkmark-radio formControlName="permission" valueName="Hide" [groupName]="info.value.name" ></k-checkmark-radio></td>
        <td><k-checkmark-radio formControlName="permission" valueName="View" [groupName]="info.value.name"></k-checkmark-radio></td>
        <td><k-checkmark-radio formControlName="permission" valueName="Edit" [groupName]="info.value.name"></k-checkmark-radio></td>
        <td>{{ getPermModel(info.value.name).description}} </td>
    </ng-container>
</tr>

更新
GetPermModel 实现:

getPermModel(name:string): SettingsPermission {
  let model = this.settingsPermissions.find(p => p.title == name);
  return model;
}

Answer 1

我可以想象两种方法来改进它:

将具有所需数据的控件添加到组

this.fb.array(this.settingsPermissions.map(perm => this.fb.group({
  name: perm.title, 
  permission: perm.val(this.exampleRole.permissions),
  permModel: this.fb.group({
     value: this.getPermModel(perm.title)),
     disabled: !this.isResetPassword
  }),
}))),

并在 HTML 中使用它

<tr formArrayName="settingsPermissions"
                    *ngFor="let info of settingsForm.get('settingsPermissions')['controls']; let i = index;">
   <ng-container [formGroupName]="i">
        <td>{{ info.value.permModel.title }}</td>
        <td><k-checkmark-radio formControlName="permission" valueName="Hide" [groupName]="info.value.name" ></k-checkmark-radio></td>
        <td><k-checkmark-radio formControlName="permission" valueName="View" [groupName]="info.value.name"></k-checkmark-radio></td>
        <td><k-checkmark-radio formControlName="permission" valueName="Edit" [groupName]="info.value.name"></k-checkmark-radio></td>
        <td>{{ info.value.permModel.description}} </td>
    </ng-container>
</tr>

表单值将包含 permModel字段，这可能是不可取的。

创建一个纯管道而不是方法getPermModel

@Pipe({
  name: 'myCustomPipe', 
  pure: true        <----- here (default is `true`)
})
export class MyCustomPipe {
   constructor(private settingsPermissions) { }

   transform(name:string): SettingsPermission {
      let model = this.settingsPermissions.find(p => p.title == name);
      return model;
   }
}

settingsPermissions如果它不是可注入(inject)的好候选者，它也可能是一个管道参数。