Angular primeNg 下拉列表
Angular primeNg dropdown
我在 table 行的每一行都有一个下拉菜单,每次我 select 从下拉菜单中选择一个选项时, selected 值会在其余下拉菜单中更新为相同的值:
我的html代码:
<p-table....>
<ng-template pTemplate="body" let-user>
<tr>
current user permission: {{user.Permission}}
<p-dropdown [options]="PermissionOptions" [(ngModel)]="permissionVal" placeholder="change..." optionLabel="name">
</p-dropdown>
</td>
</tr>
</ng-template>
TS:
interface PermissionType {
name: string,
}
PermissionOptions1: PermissionType[];
permissionVal1: PermissionType;
constructor()
{
this.PermissionOptions1 = [
{name: FolderPermissionEnum.WRITE},
{name: FolderPermissionEnum.READ},
];
}
问题可能出现在变量 permissionVal 上,它从下拉列表中接收 selected 值,现在该值对于 [= 上的所有下拉列表都是通用的28=]。如果我能以某种方式将该变量 permissionVal 更改为一个数组,也许我可以解决问题,但我不知道我该怎么做或在 HTML 上调用它。
而不是使用双向绑定语法 [(ngModel)]
,您可以将其拆分为 [ngModel]
属性 绑定和 (ngModelChange)
事件绑定语法,这将为您提供根据您的用例更好地控制数据管理。
由于您在 table 行的每一行都有一个下拉列表,我想您可以通过某种方式获取行号。假设row_num
表示行号,那么可以有如下逻辑:
<!-- html file -->
<p-dropdown [options]="PermissionOptions" [ngModel]="permissionValList[row_num]"
(ngModelChange)="updatePermissionValList($event, row_num)"
placeholder="change..." optionLabel="name">
</p-dropdown>
/* ts file */
permissionValList: PermissionType[] = []; // or can define type as --> {[key: number]: PermissionType} with default value as {}
updatePermissionValList(event: PermissionType, row_num: number) {
this.permissionValList[row_num] = event;
}
编辑:
[(ngModel)]="permissionValList[row_num]"
在你的情况下应该足够了,不需要添加任何简单赋值的方法,因为双向绑定做同样的事情。
我在 table 行的每一行都有一个下拉菜单,每次我 select 从下拉菜单中选择一个选项时, selected 值会在其余下拉菜单中更新为相同的值:
我的html代码:
<p-table....>
<ng-template pTemplate="body" let-user>
<tr>
current user permission: {{user.Permission}}
<p-dropdown [options]="PermissionOptions" [(ngModel)]="permissionVal" placeholder="change..." optionLabel="name">
</p-dropdown>
</td>
</tr>
</ng-template>
TS:
interface PermissionType {
name: string,
}
PermissionOptions1: PermissionType[];
permissionVal1: PermissionType;
constructor()
{
this.PermissionOptions1 = [
{name: FolderPermissionEnum.WRITE},
{name: FolderPermissionEnum.READ},
];
}
问题可能出现在变量 permissionVal 上,它从下拉列表中接收 selected 值,现在该值对于 [= 上的所有下拉列表都是通用的28=]。如果我能以某种方式将该变量 permissionVal 更改为一个数组,也许我可以解决问题,但我不知道我该怎么做或在 HTML 上调用它。
而不是使用双向绑定语法 [(ngModel)]
,您可以将其拆分为 [ngModel]
属性 绑定和 (ngModelChange)
事件绑定语法,这将为您提供根据您的用例更好地控制数据管理。
由于您在 table 行的每一行都有一个下拉列表,我想您可以通过某种方式获取行号。假设row_num
表示行号,那么可以有如下逻辑:
<!-- html file -->
<p-dropdown [options]="PermissionOptions" [ngModel]="permissionValList[row_num]"
(ngModelChange)="updatePermissionValList($event, row_num)"
placeholder="change..." optionLabel="name">
</p-dropdown>
/* ts file */
permissionValList: PermissionType[] = []; // or can define type as --> {[key: number]: PermissionType} with default value as {}
updatePermissionValList(event: PermissionType, row_num: number) {
this.permissionValList[row_num] = event;
}
编辑:
[(ngModel)]="permissionValList[row_num]"
在你的情况下应该足够了,不需要添加任何简单赋值的方法,因为双向绑定做同样的事情。