使用Angular4和Fireabse获取uid并迭代对象数组

我正在使用Angular4和Firebase构建1-1聊天，而且我对Angular很新颖。为了发起对话，我试图显示'/ users'子集合中的所有可用用户。所以，我需要获取用户/ {user.uid} /用户名。使用Angular4和Fireabse获取uid并迭代对象数组

这是我chat.component.ts：

import { Component, OnInit } from '@angular/core'; 
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import { UserSessionService } from '../_services/user-session.service'; 

@Component({ 
    selector: 'app-chat', 
    templateUrl: './chat.component.html', 
    styleUrls: ['./chat.component.css'] 
}) 
export class ChatComponent implements OnInit { 
    items: FirebaseListObservable<any[]>; 
    other_users: FirebaseListObservable<any[]>; 
    user_id: any; 
    from: any; 
    msgVal: string = ''; 


    constructor(public afAuth: AngularFireAuth, public af: AngularFireDatabase, public logged_user: UserSessionService){ } 

    ngOnInit() { 

     this.from= this.logged_user.getFirebaseUid(); 
     this.user_id= this.logged_user.getFirebaseUid(); 

     this.items = this.af.list('/personalMessages', { 
     query: { limitToLast: 5 } 
    }); 

    this.other_users= this.af.list('/users'); 

    } 

    findChat(){ 
    this.other_users= this.other_users; 
    this.user_id = this.user_id;  
    } 

    chatSend(theirMessage: string) {  
     this.items.push({ text: theirMessage, from: this.logged_user.getFirebaseUid(), isRead: false, timestamp: + new Date() }); 
     this.msgVal = ''; 
     this.user_id = this.user_id; 
     this.other_users= this.other_users; 
    } 

}

这是我chat.component.html：

<div class="users-chat-container" *ngFor="let other_user of other_users| async"> 
     <div id="circle" style="background-color:pink;">   
     </div> 
    <br/> <a href="#">{{other_user.username}} </a>  

    </div> 


    <div class="chat-container" *ngFor="let item of items | async"> 
     <div id="circle" style="background-image:url(http://www.ics.forth.gr/mobile/female.png);">   
     </div> 
    <br/> <a href="#">{{item.from}} </a>  
     <p>{{item.text}}</p> 
    </div> 
    <input type="text" id="message" placeholder="Type a message..." (keyup.enter)="chatSend($event.target.value)" [(ngModel)]="msgVal" />

我如何可以遍历对象的数组，我从克服“ /用户的收藏？谢谢！ :)

来源

2017-07-11 Emanuela Colta

您需要使用ForkJoin。 ForkJoin将用户列表作为输入和火并联要求对所有用户列出

尝试这样

this.af.list('/users') 
      .mergeMap((users) => { 
       if (users.length > 0) { 

       return Observable.forkJoin(
        users.map((user) => this.af.database 
         .object(`user/${user.$uid}/username`) 
         .first() 
        ), 

        (...values) => { // here you can assign username 
         users.forEach((user, index) => { user.username = values[index]; }); 
         return users; 
        } 
       ); 
      } 
      return Observable.of([]); 
      });

约forkJoin https://www.learnrxjs.io/operators/combination/forkjoin.html

来源

2017-07-11 15:26:48 CharanRoot

谢谢！是的，它的工作。我可以在我的控制台中看到结果。但是在这里，锄头可以在我的chat.component.hmtl中显示结果吗？使用* ngFor =“let other_userrs | async”我在我的控制台中发现错误：错误：InvalidPipeArgument：'[object Object]'管道'AsyncPipe'。你是否也遇到过这个问题，或者你可以帮忙吗？谢谢！ –

发布您的控制台日志result.check此链接也https://stackoverflow.com/questions/38121908/angular2-n-getting-invalid-argument-object-object-for-pipe-asyncpipe – CharanRoot

更多信息，您需要为* ngFor数组一些事情。使用object.keys可以创建一个对象数组。在下面的例子中，我已经通过一组来自firebase的对象来完成这个任务。

private getPlayersPerGroup(group: Group) { 
    this.playersInGroup = []; 
    if (group["players"]) { 
     Object.keys(group["players"]).forEach((key) => { 
      this.groupService.getPlayerById(key).then((player) => { 
       this.playersInGroup.push(player); 
      }); 
     }); 
    } 
}

来源

2017-07-12 10:24:25

谢谢！像我这样的方法申请其他对象和对象的对象。（this.changenames.forEach）; let q = this.changenameafter; this.changenameafter = pc.map（x => {return x;}）; this.changenameafter2 = this.This.whatever = this.personal_conversations.forEach（） changenameafter.map（（entry）=> {entry.Object.keys（entry）[0]]; }）; }）; ' –

使用Angular4和Fireabse获取uid并迭代对象数组

回答

相关问题