在map函数中使用后未定义并将值保存到数组中（Angular，TypeScript）

9 浏览
0 Comments

在map函数中使用后未定义并将值保存到数组中（Angular，TypeScript）

我最近在一个项目中使用Angular和TypeScript。在做CRUD操作时，我有以下代码：

      // 从数据库返回用户列表
  get_AllUsers(){
    return this.fireservices.collection('users').snapshotChanges();
  }
  getAllUsersList() : User[]{
    let userList : User[];
    this.get_AllUsers().subscribe(users => {
      userList = users.map(e => {
          return {
            uid: e.payload.doc.id,
            ...
            visited: e.payload.doc.data()['visited']
          }
      }); //console.log(userList) 在这里正确地打印了数组
    });
  return userList; // 这里我收到了一个未定义的数组，但是我想要包含数据的数组
  }

我使用Firebase作为数据库。我为User（在数据库中保存的一种数据类型）创建了一个模型，我希望返回一个列出的User数组，但是我收到了一个未定义的数组。我该如何解决这个问题？我已经在代码中加了一些注释来解释这个错误。

附注：有没有办法直接在应用程序中使用创建的模型直接接收Firebase数据（在这个例子中是'User'）？

谢谢。

0

2 答案

0 Comments

问题的出现原因是在函数`getAllUsersList()`中，使用了异步操作`this.get_AllUsers().subscribe()`来获取用户列表，但是由于异步操作的特性，`userList`数组在函数返回之前就被返回了，所以返回的是一个空数组。

解决方法是将`userList`数组作为参数传入`subscribe()`方法，并在异步操作完成后将结果保存到数组中。同时，在函数返回之前，需要将`userList`数组转换为`User[]`类型，并添加断言`as User[]`。

下面是修改后的代码：

function getAllUsersList(): User[] {
  let userList: User[] = [];
  this.get_AllUsers().subscribe(users => {
    users.map(e => {
      userList.push({
        uid: e.payload.doc.id,
        visited: e.payload.doc.data()['visited']
      });
    });
  });
  return userList as User[];
}

如果这种方法仍然报错，可以将`userList`数组的类型先转换为`unknown`，然后再转换为`User[]`类型。可以参考这个链接中的答案来实现类似的可观察对象操作：[https://stackoverflow.com/questions/47732157](https://stackoverflow.com/questions/47732157)

0
0 Comments

问题出现的原因是在map函数中使用了一个未定义的变量，并且没有返回请求的响应。解决方法是返回一个Observable并订阅调用的方法。

在这个问题中，调用的方法是getAllUsersList()，它应该返回一个Observable。代码示例中使用了pipe函数和map操作符来处理请求的响应。在map函数中，可以根据需要进行处理，并返回一个新的对象。

解决方法的代码示例如下：

getAllUsersList() : Observable {
  return this.get_AllUsers().pipe(map(e => {
    return {
      ... // your code
    })
  });
}

在这个示例中，get_AllUsers()是一个异步调用的方法，它返回一个Observable。通过使用pipe函数和map操作符，可以对响应进行处理，并返回一个新的对象。

通过返回一个Observable，可以在调用的方法中订阅这个Observable来处理响应的结果。例如：

_.getAllUsersList().subscribe(x => ...)

在这个示例中，使用subscribe函数来订阅getAllUsersList()方法返回的Observable，并在回调函数中处理响应的结果。

这样做可以确保在异步调用中正确处理响应，并避免使用未定义的变量。

0