2

我正在使用最新版本的 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

4

3 回答 3

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>标签来显示更改。你可以在这里查看我的版本链接。

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

于 2019-06-14T14:53:35.147 回答
1

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

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

于 2019-06-15T08:53:15.557 回答
-1

请更改下拉菜单的 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>
于 2017-05-24T11:40:11.320 回答