javascript Angular中的Http GET方法在将对象转换为数组时出错

2cmtqfgy 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(129)

我试图从Firebase获取包含以下详细信息的简单帖子数据。我在使用rxjsMap操作符将JavaScript对象转换为数组的部分出错。我期望的输出是一个包含三个键值对的数组。
我在responseData作为JavaScript对象得到了正确的响应，但是转换为数组的部分产生了错误。
Firebase中存储的数据：

posts
    -MgsgDidteNiYoG4auXX
        content: "Test content"
        title: "Test"

下面是我写的方法：

private fetchPosts() {
    this.http.get('https://***/posts.json')
    .pipe(map(responseData => {
      let postsArray = [];
      for (let key in responseData) {
        if (responseData.hasOwnProperty(key)) {
          postsArray.push({ ...responseData[key],  id: key})
        }
      }
      return postsArray;
    }))
    .subscribe(posts => {
        console.log(posts);
    });
  }

我期待如下：

id: -MgsgDidteNiYoG4auXX
content: "Test content"
title: "Test"

得到的错误如下：

Error: src/app/app.component.ts:51:32 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Object'.  
  No index signature with a parameter of type 'string' was found on type 'Object'.

51           postsArray.push({ ...responseData[key],  id: key})

JavaScript

来源：https://stackoverflow.com/questions/68752822/getting-error-on-http-get-method-in-angular-when-converting-object-to-array

2条答案

按热度按时间

bprjcwpo1#

从我的评论扩展，添加类型定义将删除当前的问题。

pipe(map((responseData: any) => {

理想情况下，这将是一个特定的类型，而不是any。
其次，我相信你希望做的是将父键作为子对象的值与它自己的键id合并。你可以使用Object.entries()函数
尝试以下
工作片段：

const responseData = {
  "-MgsgDidteNiYoG4auXX": {
    content: "Test content",
    title: "Test"
  }
}

let result;
for (const [key, value] of Object.entries(responseData)) {
  result = { ...value, id: key };
}
console.log(result);

this.http.get('https://***/posts.json').pipe(
  map((responseData: any) => {
    let result: any;
    for (const [key, value] of Object.entries(responseData)) {
      const result = { ...value, id: key };
    }
    return result;
  })
)

赞(0）回复(0）举报 2023-09-29

oogrdqng2#

你可能像我一样导入了错误的Map
正确导入：
import { map } from 'rxjs/operators';
错误导入：
import { map } from 'rxjs-compat/operator/map';

赞(0）回复(0）举报 2023-09-29