丰富 Angular 中的数据

Question

这是我在这里发表的第一篇文章！ （所以请保持友善^^'）

这几天我一直在寻找从 Angular 的 http 后端丰富数据的最佳方法。这是我的问题：

我有一个 http 后端，它为我提供数据库的内容。结果可以通过这三个接口进行建模：

interface interfaceA {
id: number,
value1: string,
value2: number
}

interface interfaceB {
id: number,
value3: number,
value4: number
}

interface interfaceAB {
id: number,
interfaceA: interfaceA,
interfaceB: interfaceB
}

interface x {
...
...
}

我有一些组件可以获取接口并将其显示在 UI 中。 目前，组件仅显示来自后端 api 的数据值。

我想在接口（interfaceA、interfaceB 和 interfaceAB）中添加更多数据，以精确地如何将值显示到组件中（使用 ng-container 和 *ngComponentOutlet 的子组件）：显示文本？一条链接？不同颜色或带下划线等...

会是这样的：

interface interfaceA {
{id: number, component:any, componentInput: {}},
{value1: string, component: any, componentInput: {}},
{value2: string, component: any, componentInput: {}}
}

现在我尝试实现一些包含

interfaces

、

components

和

components inputs

的类

abstract class data<T> {
  data: T; //InterfaceA, interfaceB, interfaceAB
  abstract components: {};
  abstract componentsInputs: {}
}

export type interfaceA = {
  id: number,
  value1: string,
  value2: number
}

export var interfaceAComponents = {
  id: LinkComponent,
  value1: TextCOmponent,
  value2: Coloredcomponent
}

export class DataClass extends AngularData<DataType> {
  override components = DataComponents;
  override componentsInput: { [key: string]: {[key: string]: any} } = {
    id: {input: this.data.id, link: "https://randomurl?id=" + this.data.id},
    value1: {text: this.data.value1},
    value2: {text: this.data.value2, color: red}
  }

这允许我们像这样获取组件中的数据：

interface Item {
  key: string,
  componentInput: any,
  component: Type<any>
}

class RandomCOmponent implements OnChange{
  @Input() data!: data<any>;
  items: Item[];
  
  ngOnChange(): void {
     if (!this.data) {
      console.log("data is empty: ", this.data);
      return;
    }
    this.items = this.parseItem(this.data);
  }
  
    parseItem(data: AngularData<{[key: string]: any}>, dataList: Item[] = [], root: string = '') {
    let keys = Object.keys(data.data);
    for (let key of keys) {
      let value = data.data[key];
      let component = data.components[key];
      let componentInput = data.componentInput[key];
      if (!component) {
        component = TextComponent;
      }
      if (value instanceof Object) {
        dataList = this.parseItemBis(value, dataList, root + key + ".");
      }else {
        dataList.push({
          key: root + key,
          component: component,
          componentInput: componentInput
        });
      }
    }
    return dataList;
  }
}

<table>
  <tr>
    <th *ngFor="let column of items">
      {{column.key}}
    </th>
  </tr>
  <tr">
    <td *ngFor="let column of items">
      <ng-container *ngComponentOutlet="column.component; inputs: column.componentInput"/>
    </td>
  </tr>
</table>

但是有人说我使用类来管理静态数据，这是一种不好的做法，而且它是更好的接口。

那么，您认为我的解决方案正确吗？您丰富我从 api 获取的数据的最佳方式是什么？知道我将来会在这些接口中添加新数据，或者创建类似的接口来与数据库中的其他表匹配。

我希望我的问题很清楚， 预先感谢您的回答:)

Answer 1

对我来说，这有点难以理解，我不确定这里的目标到底是什么。 我将尝试回答一些问题：

但是有人说我使用类来管理静态数据，这是一种不好的做法，而且它是更好的接口。

• 是的，我总是使用

  interfaces

  或

  types

  来表示数据结构。否则，你甚至无法指定对象的类型，最终会到处使用

  any

  。这违背了 TypeScript 的目的 😅

那么，您认为我的解决方案正确吗？您丰富我从 api 获取的数据的最佳方式是什么？

• 一般来说，我会尝试首先使用尽可能少的抽象和继承（与后端开发相反）。制定你的目标，然后尝试尽可能简单和声明性地实现它。例如，如果您的目标是简单地根据某些属性值渲染不同的组件，那么使用简单的

  ngSwitch

  可能是更好的选择。