如何为 Subject RxJS observable 分配初始值？

Posted 2023-02-19

【中文标题】如何为 Subject RxJS observable 分配初始值？

【英文标题】：How to assign an initial value to Subject RxJS observable?

【发布时间】：2017-08-22 05:00:23

【问题描述】：

我正在开发一个 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>

正如您所见，它的工作非常酷，每次我单击列标题按钮时，我的表格都会获得该列的顺序。但是我一直在寻找如何为“sizeSubject”（Subject）赋予初始值的几个小时，我喜欢在“evento”上分配值，所以当我展示它时，表格会按 eventto 排序。现在只显示按钮标题和空白表格，如果我点击任何按钮，它会按该顺序显示表格。

任何提示或 cmets 将不胜感激！

【参考方案1】：

如果你想要一个具有“初始值”的主题，更好的 RxJS 类是 BehaviorSubject。

使用 BehaviorSubject，您可以将初始值传递给它的构造函数。

【讨论】：

我们可以使用 startwith rxjs 运算符来设置主题的默认值吗

【参考方案2】：

除了使用BehaviorSubject，也可以使用普通Subject，使用Rxjs操作符startWith设置初始值。