Angular 4 Firebase Observable with .map() 在刷新时出现两次并且没有反转

Question

我将 Angular 4 与 Firebase 和 AngularFire 一起使用。我想在我的 Html 代码中显示前 10 个用户，所以我的代码是

 export class HomefillerComponent implements OnInit {
  topusers: Observable<any>;
  constructor(db: AngularFireDatabase,public authService: AuthService) {


        this.topusers = db.list('users', {
        query: {
         orderByChild: "totalscore",
         limitToLast: 10,
        }
        }).map((topusers) => {console.log(topusers);
        return topusers.reverse();})   
   }

我的 firebase 数据库是：

"users" : {
    "Test1" : {
      "totalscore" : 50,
      "username" : "test1"
    },
    "Test2" : {
      "totalscore" : 30,
      "username" : "test2"
    },
    "Test3" : {
      "totalscore" : 20,
      "username" : "test1"
    },
    "Test4" : {
      "totalscore" : 10,
      "username" : "test1"
    },
    "Zekes" : {
     "totalscore" : 14,
     "username" : "Zekes"
      }
  }

当我在我的 angular 4 应用程序中导航时，一切正常 fine.However 当我重新刷新页面时，我得到两个 console.log(a) 一个对象反转，另一个没有反转object.So 我的 html 显示未反转的对象。你知道哪里出了问题吗？？它仅在我刷新页面时发生。这是我刷新页面时得到的console.log(a)。

Answer 1

经过一些测试，我发现发生了什么：

问题是 .reverse() 函数不仅 return 是一个反转数组，而且反转数组本身。这种对 topusers 的更改导致 Observable 再次触发 .map()，这会将数组反转回其原始形式。

要解决此问题，只需将 return 语句更改为 return topusers.slice().reverse();。 .slice() 函数 return 是数组的新副本，可以防止出现此问题。

Angular 4 Firebase Observable with .map() 在刷新时出现两次并且没有反转

Angular 4 Firebase Observable with .map() apears two times on refresh and not reversed

firebase

typescript

firebase-realtime-database

angularfire2

angular