Question

我尝试使用AngularFire2创建一个简单的聊天应用。用户登录Facebook并将他们的个人资料信息保存到users / uid。然后，每次用户发送聊天时，它都会发送他们的UID以及消息。我试图将UID映射到当前正在运行的用户信息。然而，当我添加/删除消息时，一些数据闪烁并且似乎正在重新渲染而不是仅使用新信息进行更新。更具体地说，任何不是我自己刷新的配置文件信息。我甚至都不确定为什么我的闪光灯不会闪光，因为它都是以同样的方式来自Firebase。任何人都知道如何解决闪烁问题？

chat.service.ts

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class ChatService {
  chat_list$: Observable<any>;
  items$: FirebaseListObservable<any>;
  constructor(public af: AngularFire) {
    this.items$ = af.database.list('/items', {
      query: { limitToLast: 15, orderByKey: true}
    });
    this.chat_list$ = this.items$.map(chats => {
      console.log('chats: ', chats);
      return chats.map(chat => {
        if ( chat.sender !== af.database.object(`users/${chat.uid}`) ) {
          chat.sender = af.database.object(`users/${chat.uid}`);
        }
        return chat;
      });
    });
  }
}

home.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { ChatService } from '../services/chat.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  name: string;
  message: string;
  constructor(public auth: AuthService, public chat: ChatService) {
    auth.isLoggingIn = false;
  }
  onMessageSend(form){
    console.log('form submit: ', form);
    this.chat.items$.push(form);
    this.message = '';
  }
  removeChat(chat_key){
    this.chat.items$.remove(chat_key);
  }
}

home.component.html

<div class="container m-t-1">
<div class="row">
  <div class="col-xs-12">
  <h1>Quick Chat App</h1>
  <button class="btn btn-danger pull-right" (click)="auth.signout()">Sign Out</button>
</div>
</div>
<form (ngSubmit)="onMessageSend(sendForm.value)" #sendForm="ngForm">
<ul class="m-t-1">
  <li *ngFor="let chat of chat.chat_list$ | async">
    <img src="{{ (chat.sender | async)?.photo }}" alt="{{ (chat.sender | async)?.name }}'s profile picture">
    <span class="message">{{ chat.message }}</span> <span class="tag tag-primary m-l-1">{{ (chat.sender | async)?.name }}</span>
    <span class="tag tag-danger" (click)="removeChat(chat.$key)">X</span>
  </li>
</ul>
<div class="input-group m-t-1">
  <input name="message" [(ngModel)]="message" type="text" class="form-control" placeholder="Enter message..." autocomplete="off" required>
  <span class="input-group-btn">
    <button class="btn btn-primary" type="submit"><i class="fa fa-send-o"></i></button>
  </span>
</div>
<label for="message" class="pull-right posting-as">Posting as {{auth.user.name}}</label>
<input type="hidden" name="uid" [(ngModel)]="auth.user.uid">
</form>
</div>

Answer 1

我第二次尝试简化我的第一个答案就更好了。检查出来，我仍然会看看它是否可以进行优化。

<强> chat.service.ts

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class ChatService {
  chat_list: Array<any>;
  chat_list$: Observable<any>;
  chat_senders$: any = {};
  items$: FirebaseListObservable<any>;
  constructor(public af: AngularFire) {
    this.items$ = af.database.list('/items', {
      query: { limitToLast: 15, orderByKey: true}
    });
    this.chat_list$ = this.items$.map(chats => {
      chats.map(chat => {
        this.chat_senders$[chat.uid] = af.database.object(`users/${chat.uid}`);
        this.chat_senders$[chat.uid].subscribe((sender) => {
          chat.sender = sender;
        });
        return chat;
      });
      return chats;
    });
  }
}

<强> home.component.html

<div class="container m-t-1">
<div class="row">
  <div class="col-xs-12">
  <h1>Quick Chat App</h1>
  <button class="btn btn-danger pull-right" (click)="auth.signout()">Sign Out</button>
</div>
</div>
<form (ngSubmit)="onMessageSend(sendForm.value)" #sendForm="ngForm">
<ul class="m-t-1">
  <li *ngFor="let chat of chat.chat_list$ | async">
    <img src="{{ chat.sender?.photo }}" alt="{{ chat.sender?.name }}'s profile picture">
    <span class="message">{{ chat.message }}</span> <span class="tag tag-primary m-l-1">{{ chat.sender?.name }}</span>
    <span class="tag tag-danger" (click)="removeChat(chat.$key)">X</span>
  </li>
</ul>
<div class="input-group m-t-1">
  <input name="message" [(ngModel)]="message" type="text" class="form-control" placeholder="Enter message..." autocomplete="off" required>
  <span class="input-group-btn">
    <button class="btn btn-primary" type="submit"><i class="fa fa-send-o"></i></button>
  </span>
</div>
<label for="message" class="pull-right posting-as">Posting as {{auth.user.name}}</label>
<input type="hidden" name="uid" [(ngModel)]="auth.user.uid">
</form>
</div>

Answer 2

这是我第一次尝试使用Firebase和我的内容之间的额外层。还有其他人有更好的解决方案吗？

<强> chat.service.ts

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class ChatService {
  chat_list: Array<any>;
  chat_list$: Observable<any>;
  chat_senders$: any = {};
  items$: FirebaseListObservable<any>;
  constructor(public af: AngularFire) {
    this.items$ = af.database.list('/items', {
      query: { limitToLast: 15, orderByKey: true}
    });
    this.chat_list$ = this.items$.map(chats => {
      chats.forEach(chat => {
        this.chat_senders$[chat.uid] = af.database.object(`users/${chat.uid}`);
      });
      return chats;
    });
    this.chat_list$.subscribe(chat_list => {
      this.chat_list = chat_list.map(chat => {
        this.chat_senders$[chat.uid].subscribe((sender) => {
          chat.sender = sender;
        });
        return chat;
      });
      console.log(this.chat_list);
    });
  }
}

<强> home.component.html

<div class="container m-t-1">
<div class="row">
  <div class="col-xs-12">
  <h1>Quick Chat App</h1>
  <button class="btn btn-danger pull-right" (click)="auth.signout()">Sign Out</button>
</div>
</div>
<form (ngSubmit)="onMessageSend(sendForm.value)" #sendForm="ngForm">
<ul class="m-t-1">
  <li *ngFor="let chat of chat.chat_list">
    <img src="{{ (chat.sender)?.photo }}" alt="{{ (chat.sender)?.name }}'s profile picture">
    <span class="message">{{ chat.message }}</span> <span class="tag tag-primary m-l-1">{{ (chat.sender)?.name }}</span>
    <span class="tag tag-danger" (click)="removeChat(chat.$key)">X</span>
  </li>
</ul>
<div class="input-group m-t-1">
  <input name="message" [(ngModel)]="message" type="text" class="form-control" placeholder="Enter message..." autocomplete="off" required>
  <span class="input-group-btn">
    <button class="btn btn-primary" type="submit"><i class="fa fa-send-o"></i></button>
  </span>
</div>
<label for="message" class="pull-right posting-as">Posting as {{auth.user.name}}</label>
<input type="hidden" name="uid" [(ngModel)]="auth.user.uid">
</form>
</div>

Angular2 ngFor与嵌套的Observable / FirebaseObjectObservable在更新时闪烁一些数据

2 个答案: