在打字稿中制作模型和设置值

Question

我正在开发 angular 应用程序。我想将数据发送到 post API。我的 json 看起来像这样

{
    "name": "julie",
    "id": 1,
    "PersonalDetails": {
        "homeId": 23,
        "homeName": "Julie Home"
    },
    "OfficialDetails": {
        "OfficeId": 45,
        "OfficeAddress": "Near townhall"
    }
}

在我的组件中，我想让这些数据显然将在我的组件中使用变量设置值，并将其发送到我的 post API 方法。将来我可能需要在上面的结构中发送更多的模型但不同的数据，所以考虑制作接口是否可行。但我是 typescript 的新手，所以无法决定并执行它

我只想知道为此制作模型并设置值的好方法是什么。如何制作model/interface和设置值？

Answer 1

在您的情况下，您需要为您的数据制作基本界面。

例如

interface YourData {
  id?: number;
  name?: string;
  PersonalDetails?: PersonalDetails
  OfficialDetails?: OfficialDetails
}

那么，最好为数据中的每个子项创建一个接口。在你的情况下，PersonalDetails 和 OfficialDetails.

interface PersonalDetails {
  homeId?: number;
  homeName?: string;
}

interface OfficialDetails {
  OfficeId?: number;
  OfficeAddress?: string;
}

以后你可以扩展你的界面，让你的数据更加灵活。

成功创建界面后，只需使用界面转换您需要的所有值。例如：

sendData(payload: YourData): Observable<YourData> {
  return this.http.post<YourData>(payload)
    .pipe(
      ...
    );
}

在打字稿中制作模型和设置值

Making model and setting values in typescript

angular

typescript

angular8