PrimeNG 表格下拉编辑不适用于标签答案

【问题标题】：PrimeNG table dropdown edit not working with labelPrimeNG 表格下拉编辑不适用于标签
【发布时间】：2017-10-24 15:24:52
【问题描述】：

我正在使用最新版本的 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 时，应在此处显示 Newyork（标签），而不是其值。目前它显示 1 而不是 Newyork

【问题讨论】：

你能解决这个问题吗？

标签： angular primeng primeng-turbotable primeng-dropdowns

【解决方案1】：

如果您查看PrimeNG doc，则有一个带有品牌列的示例，可通过下拉列表进行编辑。并且发送到该下拉列表的选项具有相同的标签和值。

所以你的 colors 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

【讨论】：

感谢您花时间回答它。但它并没有解决实际问题，而是改变了问题。 Kaushal Kishore 想要的是将值和标签绑定到我们在 .net 和常规角度选择组件中执行的传统操作。
我更新了我的StackBlitz。是否符合您现在的需求？如果没有，你能告诉我更多的细节吗？
你能解释一下这个 {{rowData['color'].name}} [{{rowData['color'].id}}]
rowData 对应于表格的一行，因此对应于 cars 数组的一个条目。 rowData['color'] 对应于这样一行的 color 属性，在我们的例子中是一个对象。例如，对于第一行，rowData['color'] 是{ id: 0, name: "Orange" }。所以rowData['color'].id 是0 和rowData['color'].name 是Orange。清楚吗？

【解决方案2】：

有一个可能的解决方法。使用 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。

【讨论】：

【解决方案3】：

请更改下拉菜单的 ngModel。现在您正在尝试绑定到 data[col.field] 请绑定到 data[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>

【讨论】：

仍然显示下拉列表的 id 而不是标签。我已将 data[col.field] 更改为 data[col.label]。我正在将 p-column 属性与 p-dropdown 绑定，在 p-column 中没有“label”可用的属性