PrimeNG 表下拉列表编辑不适用于标签

Question

我正在使用最新版本的PrimeNG表来列出Angular 4中的记录。但是我面临着通过p-drowpdown编辑记录的问题。如果我从下拉列表中选择任何数据，则其值字段将显示在列中，这应该是标签字段。

<p-column field="id" header="Name"  [sortable]="false" resizableColumns="true"
[filter]="true" filterPlaceholder="Search" [editable]="true" [style]="{'overflow':'visible'}">
    <ng-template let-col let-data="rowData" pTemplate="editor">
            <p-dropdown [(ngModel)]="data[col.field]" [autoWidth]="false" required="true" [options]="attributeOptionList" class="form-control" [style]="{'width':'100%','height':'32px'}"
        filter="filter" placeholder="Select Attribute"></p-dropdown>
    </ng-template>
</p-column>

例：下拉示例

价值 |标签

1 | 纽约

2 | 奥利

在选择城市 ID 1 时，纽约(标签(应显示在那里，而不是其值。目前它显示 1 而不是纽约

Answer 1

有一个可能的解决方法。以 Sean Ch 为例，我通过翻译方法扩展了模板中的输出表单元格。

<p-cellEditor>
  <ng-template pTemplate="input">
    <p-dropdown appendTo="body" [options]="colors" [(ngModel)]="rowData[col.field]" [style]="{'width':'100%'}"></p-dropdown>
  </ng-template>
  <ng-template pTemplate="output">
    {{translate(rowData[col.field])}}
  </ng-template>
</p-cellEditor>

在 .ts 文件中，我添加了翻译方法。

translate(value: number): string {
  if (value === 1) {
    return 'yes';
  } else if (value === 0) {
    return 'no';
  }
  return '';
}

在模板上，我还添加了一个<pre>标签来显示更改。你可以在这里查看我的版本链接。

为了更流畅的下拉交互行为，我建议升级到更高版本的PrimeNg。

Answer 2

如果你看一下PrimeNG文档，有一个品牌列的例子，可以通过下拉菜单进行编辑。发送到该下拉列表的选项具有相同的标签和值。

所以你的颜色SelectItem数组应该看起来像

[{label:'Orange', value:'Orange'}, {label:'Black', value:'Black'}]

而不是

[{label:'Orange', value:0}, {label:'Black', value:1}]

在您的情况下，您可以像这样填充该数组：

this.colorNames.forEach(color => {
  this.colors.push({ label: color, value: color });
});

查看编辑后的堆栈闪电战

Answer 3

请更改下拉菜单的ngModel。现在您正在尝试绑定到数据[col.field]，请绑定到数据[col.label]。

<p-dropdown [(ngModel)]="data[col.label]" [autoWidth]="false" required="true" [options]="attributeOptionList" class="form-control" [style]="{'width':'100%','height':'32px'}" filter="filter" placeholder="Select Attribute"></p-dropdown>