使用 p-dropdown PrimeNG 生成正确的 json答案

【问题标题】：Generate correct json with p-dropdown PrimeNG使用 p-dropdown PrimeNG 生成正确的 json
【发布时间】：2019-04-06 09:02:20
【问题描述】：

我是 Angular 新手，在 java 中使用 API 时遇到以下情况：

我有class Release，其中不需要类别（类别类别）。

@Entity
@Table (name = "release")
public class Release {
    @Id
    @GeneratedValue (strategy = GenerationType.IDENTITY)
    private Long id;

    @NotNull
    private String description;

    @ManyToOne
    @JoinColumn (name = "id_category")
    private Category;

    (...)
}

当我在使用 REST API 在 Angular 中创建的页面上注册发布时，我将json 发送到此 API，如下所示：

{"description": "test", "category": {}}

由于没有通知该类别。但我的 API 返回以下错误（在 java 中）：

TransientObjectException - 对象引用了一个未保存的瞬态 instance - 在刷新之前保存瞬态实例

我在Postman中做了一个测试，发了json如下注册release：

{"description": "test"}

这样可以注册，那就有疑问了：

错误出现在使用PrimeNG 的p-dropdown 组件的Angular 中，如下所示：

    <p-dropdown placeholder = "Select ..." [autoWidth] = "false"
      [filter] = "true" [options] = "categories"
      [(ngModel)] = "release.category.id" name = "category"
      #category = "ngModel"> </ p-dropdown>

或者错误是在类发布中的类别声明中？

当您注册发布通知类别时，没有错误，json 发送如下：

{"description": "test", "category": {"id": 1}}

谢谢！

【问题讨论】：

标签： java json typescript primeng

【解决方案1】：

无论是什么情况，p-dropdown options 都接受 Array 并且在这里返回对象

{"description": "test", "category": {}}

应该是

{"description": "test", "category": [{"name":"John", "id": "1"},{"name":"Kan", "id": "2"}]}

然后它将接受数组作为选项。

您必须使用optionLabel 属性来定义要在列表中显示的键。

<p-dropdown placeholder = "Select ..." [autoWidth] = "false"
  [filter] = "true" [options] = "categories"
  [(ngModel)] = "release.category.id" name = "category"
  #category = "ngModel" [optionLabel]="name"> </ p-dropdown>

在这种情况下，如果用户选择，您的 ngModel 将拥有整个对象

{"name":"John", "id": "1"}

如果您希望它在用户选择 John 时返回单个值“1”。比你必须修改选项数组如下：

[{"label":"John", "value": "1"},{"label":"Kan", "value": "2"}

希望对你有帮助！

【讨论】：