使用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並迭代對象數組

回答

相關問題