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

Question

我经常需要使用仅在组件 View 中使用的参数来扩展我的 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 个模型，而且我需要一直在它们之间切换。

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

Answer 1

只需使用 ? 运算符将这些字段设为可选:

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']);