角形阵列访问静态数据
角形阵列访问静态数据
提问于 2021-07-20 15:42:49
我正在使用反应性表单创建一个页面，用于管理应用程序中的角色和权限。有多个复选框表打开或关闭角色的权限，我正在尝试使用*ngFor动态创建这些元素。问题是，我的表单元素只有一个布尔值(on或off)，并且需要相应的元数据(显示名称、声明列表等)。需要检索的元素才能正确显示。我的问题是，当我在表单控件集合中循环时，我需要将它与视图模型相匹配(本质上需要在我的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;
}Stack Overflow用户
回答已采纳
发布于 2021-07-20 16:20:58
我可以想象两种方法来改进它：
- 向组
添加具有所需数据的控件。
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也可能是管道参数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68457749
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号