Question

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

<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时，应该在那里显示Newyork（标签），而不是它的价值。目前它显示1而不是Newyork

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方法。

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

在模板上，我还添加了<pre>标签以显示更改。您可以在link处查看我的版本。

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

Answer 2

如果您查看PrimeNG doc，这里有一个带有brand列的示例，可通过下拉菜单进行编辑。发送到该下拉菜单的选项具有相同的标签和值。

因此，您的颜色 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 });
});

查看已编辑的StackBlitz

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>

Primeng数据表下拉列表编辑不使用标签

3 个答案: