Angular Form Array访问静态数据

Question

我正在使用 Reactive Forms 创建一个页面来管理我的应用程序中的角色和权限。有多个复选框表可以打开或关闭角色的权限，我正在尝试使用 *ngFor 动态创建这些元素。问题是，我的表单元素只有一个布尔值（打开或关闭），并且需要相应的元数据（显示名称、声明列表等），我需要检索这些元数据才能正确显示该元素。我的问题是，当我遍历表单控件集合时，我需要将它与视图模型相匹配（本质上需要在我的 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 如果它不是一个很好的可注入候选者，它也可能是一个管道参数。

Answer 2

如果我对问题的理解正确，那么您正试图消除这一行，因为您正确地确定了 Angular 的更改检测将使函数调用变得昂贵，

<td>{{ getPermModel(info.value.name).description}} </td>

我建议编写自定义 angular 管道来为您完成该处理。您可以传入您的设置配置和表单值，并在输入更改时仅运行执行 getPermModel() 函数利用管道进行的所有处理，而不是在每次更改时运行像模板中的函数一样更改检测周期。

以下是实现管道的基础知识， https://angular.io/guide/pipes

看起来像这样，

@Pipe({name: 'getPermModel'})
export class GetPermModelPipe implements PipeTransform {
  transform(name: string, settings: PermissionsConfiguration): string {
    return this.settings.find(p => p.title == name);
  }
}

然后在您的模板中，

<td>{{ (info.value.name | getPermModel : settingsConfig ).description}} </td>

Angular Form Array访问静态数据

Angular Form Array access static data

angular

angular-reactive-forms

ngfor