web-dev-qa-db-ja.com

サブジェクトRxJSオブザーバブルに初期値を割り当てる方法は？

Angular 2アプリを開発しています。リスト内の列の順序を変更可能にして、タイトルをクリックし（データテーブルが機能するため））、Angularfire 2からアイデアを得ますドキュメントの例、これが私のコードです：（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() {

  }

}

これが私の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>

とてもクールに機能しているのがわかると思いますが、列のTitle Buttonをクリックするたびに、テーブルにその列の順序が表示されます。しかし、私は「sizeSubject」（件名）に初期値を与える方法について何時間も探していました。「evento」に値を割り当てたいので、表はeventoの順に表示されます。これで、ボタンのタイトルとテーブルが空白で表示されるようになりました。いずれかのボタンをクリックすると、テーブルがその順序で表示されます。

ヒントやコメントはありがたいです！

angularfirebasefirebase-realtime-databaserxjsangularfire2
18
CaribeSoft

「初期値」を持つサブジェクトが必要な場合は、BehaviorSubjectを使用することをお勧めします。

BehaviorSubjectを使用して、コンストラクターに初期値を渡します。

42
snorkpete