web-dev-qa-db-fra.com

Comment attribuer une valeur initiale à Subject RxJS observable?

Je développe une Angular 2 app, j'ai besoin de changer l'ordre de mes colonnes dans une liste, en cliquant sur le titre (comme le tableau de données fonctionne) et j'ai une idée d'Angularfire 2 exemples de documentation, voici mon code: (grupos.component.ts)

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable    }  from 'angularfire2';
import { Subject } from 'rxjs/Subject';
import {AF} from "../providers/af";
import { Router } from "@angular/router";
{ EditGpoComponent } from '../edit-gpo/edit-gpo.component';

@Component({
  selector: 'app-grupos',
  templateUrl: './grupos.component.html',
  styleUrls: ['./grupos.component.css']
})

export class GruposComponent implements OnInit {
  public newMessage: string;
  eventos: FirebaseListObservable<any[]>;
  sizeSubject: Subject <any>;

 constructor( af: AngularFire, private router: Router ) {
    this.sizeSubject = new Subject();
    this.eventos = af.database.list('/eventos', {
          query: {
           orderByChild: this.sizeSubject

          }
        });
  }

  filterBy(size: string) {
   this.sizeSubject.next(size); 

   }

  editaGrupo(keyGrupo){

    this.router.navigate(['/add-gpo']);
  }

  ngOnInit() {

  }

}

Voici le code de mes Grupos.components.html:

<div class="container">


<br><br><br>
  <div class="row"> 
  <a href="#" class="btn btn-info" routerLink="/add-gpo">+Add New Event</a> 
  <br><br>
   <table class="table table-striped">
   <thead>
   <tr>
    <th><button (click)="filterBy('evento')">EVENT</button></th>
    <th><button (click)="filterBy('arrival')">ARRIVAL</button></th>
    <th><button (click)="filterBy('departure')">DEPARTURE</button></th>
    <th><button (click)="filterBy('hotel')">VENUE</button></th>
    <th><button (click)="filterBy('pax')">PAX</button></th>
    <th>FUNCTIONS</th>
    </tr> 
   </thead>
   <tbody>
   <tr *ngFor="let evento of eventos | async ">
        <td>{{evento.evento}}</td>
        <td>{{evento.arrival}}</td>
        <td>{{evento.departure}}</td>
      <td>{{evento.hotel}}</td>
      <td>{{evento.pax}}</td>
      <td style="font-size: 1.2em">
      <a href="#" [routerLink]="['/editGpo']" [queryParams]="{eveId: evento.$key}"><span class="glyphicon glyphicon-edit" aria-hidden="true" title="edit event"></span></a>
      <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true" title="attendees"></span></a>
      <a href="#"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true" title="speakers"></span></a>
      <a href="#"><span class="glyphicon glyphicon-trash glyphicon " aria-hidden="true" title="delete event"></span></a>

      </td>
    </tr>
    </tbody>

</table>
</div>
</div>

Comme vous voyez son fonctionnement assez cool, chaque fois que je clique sur le bouton Titre de la colonne, ma table obtient l'ordre de cette colonne. Mais je cherche depuis des heures sur la façon de donner une valeur initiale à "sizeSubject" (Subject), j'aime assigner la valeur sur "evento", donc le tableau apparaît ordonné par evento comme je le montre. À présent, montrez-moi simplement les titres des boutons et le tableau en blanc, et si je clique sur un bouton, cela me montre le tableau dans cet ordre.

Tous les conseils ou commentaires seront appréciés!

angularfirebasefirebase-realtime-databaserxjsangularfire2
18
CaribeSoft

Si vous voulez un sujet qui a une "valeur initiale", une meilleure classe RxJS à utiliser est BehaviorSubject.

Avec BehaviorSubject, vous transmettez votre valeur initiale à son constructeur.

42
snorkpete