Angular 使用函数捕获typescript类中的json数据

我使用的是被动表单，在理解数据如何映射到表单控件时遇到了一些问题。让我们以一个具有id和名称的对象控件为例。此控件应呈现为输入文本框，用户在Id中键入。然后，我使用自动完成功能远程查找对象，并使用如下所示的数据填充基础对象

{ id: 1234, description: "Some description" }

因为，这是一个对象而不是字符串-输入框显示[object object]作为其值。我假设我需要为此对象提供一个

toString

方法，以便能够显示这样的值

1234-一些描述

以下是表单配置：

this.orderForm = this.fb.group({
  customer: '',
  ....
  items: this.fb.array([ this.initItems() ])
  ...

因此，

customer

是这些对象之一，而另一个类似的对象位于

项

对象上

export class Customer {
   id: string;
   descr: string;
   toString = () => this.id + " - " + this.descr
}

export class ItemDetail {
    id: string;
    descr: string;
    toString = () => this.id + " - " + this.descr
}

export class Order {
    id: string;
    ...
    customer: Customer;
    items: Item[]
}

export class Item {
    ...
    detail: ItemDetail
    ...
}

一旦我有了订单数据，我将以如下形式加载它：

const itemsFGs = order.items.map(item => this.fb.group(item));
const itemsFA = this.fb.array(itemsFGs);
this.orderForm.setControl('items', itemsFA);

问题是数据作为普通对象加载，并且没有类型转换到适当的类，因此，在任何嵌套对象上都没有

toString

方法，这使得输入框显示

[object object]

，而不是使用toString方法

下面是示例订单的json的样子：

{
  id: "1",
  customer: {
    id: "1",
    name: "some customer"
  },
  items: [{
     detail: {
       id: "1",
       descr: "some item"
     }
  }]
}

---

主要的问题是，我如何确保以json形式输入的数据被捕获到适当的类中，以便像toString这样的方法可以正确显示。

关键注意：在typescript中创建复杂的对象类型时，始终使用interface

export interface Customer {
   id: string;
   descr: string;
}

另外，如果您不确定来自服务的参数，并且预期会出现未定义的错误，请使用以下代码将这些属性指定为可选属性

export interface ItemDetail {
    id: string;
    name: string;
    descr?: string; //optional
}

export interface Order {
    id: string;
    ...
    customer: Customer;
    items: Item[]
}
export interface Customer{
    id:string;
    name: string;
    address?: string; //optional
    dob?: Date;       //optional

}

这样可以避免可选参数在响应中不存在时绑定到实际对象。当这些属性在服务响应中可用时，它们如何按预期绑定

更新1：

您应该进行另一级别的分组

 this.form = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      lastName: ['', [Validators.required, Validators.minLength(3)]],
      customerGroup :this.fb.group({
               firstName: ['', [Validators.required, Validators.minLength(3)]],
               lastName: ['', [Validators.required, Validators.minLength(3)]],   
      }, {validator: Validators.required})
      ....
  });

---

这听起来不错，我会尝试一下，但在界面中，您不能定义方法，我想为这些内部对象指定tostring方法，以便它们在输入文本框中正确显示。有什么建议吗？toString（）将对textbox做什么？假设客户对象有以下数据

{id:1，name:'abc'}

。如果我使用[formControl]=“customer”将此对象绑定到输入文本框，则输入框会显示[object object]作为其值。我想展示一些类似于

1-abc

的东西，而不是你的答案很有帮助，但是我仍然遇到同样的问题。我从您的回答中了解到的是在customer对象下为id和name字段创建单独的表单控件，但我希望两者都有一个文本框，并更改textbox的值以显示这两个值并绑定表单控件提示customer对象。我觉得这是一个如此简单和常见的用例，我似乎找不到一个例子。在当前设置中，文本框将[object]显示为textbox的值，除非我在json对象上明确定义了一个tostring方法，这表明tostring方法是。。。。。。用于在文本框中显示值。这就是为什么我想使用一个类，在这个类中我可以定义一个tostring方法r，然后将json强制转换到这个类，但显然这也不可能，接口也不能有方法。