代码之家 › 专栏 › 技术社区 › Milos

用于组件的角度扩展API模型

typescript angular javascript

1

Milos · 技术社区 · 7 年前

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

例如,我有一个模型:

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

这是我从API得到的:

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

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

为此目的使用哪种方法。我知道有两种解决方案:

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 回复 | 直到 7 年前

1

3

Lynx 242 7 年前

只需使用 ? -运算符:

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

2

Kristóf Horváth 7 年前

我认为codewise第二个选项是正确的,但据我所知,第一个选项没有任何错误,只要确保新参数可以为空或以某种方式被忽略,这样如果不将它们设置在不需要的地方,就不会出现错误。