如何在 Angular 服务中拆分数据数组？

Question

我有如下数据形式

{
  "COLUMNS": ["Col1", "Col2", "Col3", "Col4", "Col5"],

  "DATA": [
             [Test, Test, Test, Test, Test],
             [Test, Test, Test, Test, Test]
          ]
}

我想在我的服务中将这些数据分成两部分，我想将我的列和数据分开。

我尝试使用下面的 .shift() 方法，但它 return 未定义。

我的服务：

getService(): any{
 this.http.get<string[]>(this.url2).pipe(map(data => {
  return data.shift()
}))

}

我的组件：

  ngOnInit(): void {
      this.columns = this.productService.getProductsService();
  }

我做错了什么？

Answer 1

您正在 getService() 中返回一个 Observable，您应该先订阅它以获取结果，然后再做任何您想做的事情

示例：

this.productService.getProductsService().subscribe(c => {
  this.columns = c;
});

此外，您应该更正您尝试从服务调用的方法的名称：getProductsService() 或 getService()

Answer 2

首先你不应该使用ngOnInit生命周期挂钩来加载数据。

其次，根据您的类型，您希望得到一个字符串数组string[]，但是如果我理解您的问题，您说您想要拆分另一个数据结构。 array.shift() 从数组中删除第一个元素并 return 删除它。当您移动 string[] 时，您会得到一个 string 但您说的目的是拆分一个对象。

{
  "COLUMNS": ["Col1", "Col2", "Col3", "Col4", "Col5"],

  "DATA": [
             [Test, Test, Test, Test, Test],
             [Test, Test, Test, Test, Test]
          ]
}

^ 这个会像 { COLUMNS: string[], DATA: Test[][] }

第三，Test类型是什么？

...
[
  [Test, Test, Test, Test, Test],
  [Test, Test, Test, Test, Test]
]
...

第四，你不应该使用any。

最后，我的建议是先修复类型。然后使用 SOLID。 http服务应该只请求数据并且return它是。就是这样，没有突变，没有副作用。拆分接收到的数据显然不是 http 服务的职责。

Answer 3

我解决了我的问题。这是我的解决方案

public general : any[];
public columns : string[];
public gridData: Test[];

this.productService.getProductsService().subscribe((res: Test[]) => {
  this.general = res;
  this.columns = Object.values(this.general).shift();
  this.gridData = Object.values(this.general)[1];
  
});

如何在 Angular 服务中拆分数据数组？

How to split data array in Angular Service?

rxjs

angular