角4 Firebase Observable与.map（）apears刷新两次并且不会颠倒

Question

我正在使用带有Firebase和AngularFire的Angular 4。我想显示在我的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();}) 
    } 

我的火力数据库是：

"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" 
     } 
    } 

当我在我的角度4应用程序的一切工作导航fine.However当我重新搜索页面时，我得到两个console.log(a)与反向对象和第二个与不反向对象。所以我的HTML显示未反转的对象。 你有什么想法吗？它只发生在我刷新页面时。 这是我刷新页面时得到的console.log(a)。

Answer 1

一些测试后，我发现发生的事情：

的事情是.reverse()功能不仅返回反阵，但反转阵列本身。而对topusers的这种改变导致Observable再次触发.map()，这将数组倒回原来的形式。

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