Angular primeNg 下拉列表

Question

我在 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 上调用它。

Answer 1

而不是使用双向绑定语法 [(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]" 在你的情况下应该足够了，不需要添加任何简单赋值的方法，因为双向绑定做同样的事情。

Angular primeNg 下拉列表

Angular primeNg dropdown

angular

primeng

primeng-datatable

primeng-dropdowns