使用函数在打字稿类中捕获 json 数据

Question

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

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

因为这是一个对象而不是字符串 - 输入框显示 [object Object] 作为它的值。我假设我需要为此对象提供一个 toString 方法才能显示这样的值 1234 - Some description.

表单配置如下：

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

所以 customer 是其中一个对象，另一个类似的对象在 item 对象上。

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 等方法可用于正确显示。

Answer 1

重点注意：在 typescript 中创建复杂对象类型时，请始终使用接口。

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})
      ....
  });

使用函数在打字稿类中捕获 json 数据

capturing json data in typescript classes with functions

angular

typescript

angular-reactive-forms

使用函数在打字稿 类 中捕获 json 数据

capturing json data in typescript classes with functions

angular

typescript

angular-reactive-forms

使用函数在打字稿类中捕获 json 数据