时间戳

首页 > 解决方案 > 用于组件目的的 Angular 扩展 API 模型

javascript - 用于组件目的的 Angular 扩展 API 模型

问题描述

我经常需要使用仅在组件视图中使用的参数来扩展我的 API 模型。

例如我有一个模型：

export class Person {
  name: string;
  surname: string;
  address: string;
}

这是我从 API 得到的：

getPersons(): Observable<Person[]> {
  return this.httpClient.get<Person[]>`${environment.API}/person`);
}

当我在我的组件中得到这个时，我经常需要使用参数/属性扩展模型，我在请求后进行数据处理，或者只是简单的“活动”/“选择”参数用于 UI 可视化跟踪。

为此目的使用哪种方法。我知道2个解决方案：

1）向类模型添加参数，即使该参数不参与服务器响应，只需将它们与标准参数分开即可：

export class Person {
  name: string;
  surname: string;
  address: string;

  ui_active: boolean;   // I know that those parameters are not from API        
  ui_fullName: string;  // response but they are here to make my life easier
}

2）使用这些参数创建另一个扩展类：

export class PersonExtended extends Person  {
  ui_active: boolean;       
  ui_fullName: string
}

但是这种方法使事情变得复杂，因为我有 2 个模型，我需要一直在它们之间切换。

这种情况的最佳做法是什么？

标签： javascriptangulartypescript

解决方案

只需使用?-operator 将这些字段设为可选：

export class Person {
  name: string;
  surname: string;
  address: string;

  ui_active?: boolean;       
  ui_fullName?: string; 
}

因此，您可以使用它们，但您不必这样做。

编辑：

如果您必须在使用以下通用方法时删除它们：

private omitFields<T>(object: T, fields: Array<string>): T {
    for (let field of fields) {
        delete object[field];
    }
    return object;
}

例如，像这样使用它：

this.omitFields(el, ['ui_active', 'ui_fullName']);

推荐阅读