gpt4 book ai didi

angular - 如何为 Subject RxJS observable 分配初始值?

转载 作者:太空狗 更新时间:2023-10-29 16:55:57 31 4
gpt4 key购买 nike

我正在开发一个 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”(主题)赋予初始值的时间,我喜欢在“evento”上分配值,因此表格显示时按 evento 排序。现在只需向我显示按钮标题和空白表格,如果我单击任何按钮,它会按该顺序向我显示表格。

任何提示或意见将不胜感激!

最佳答案

如果您想要一个具有“初始值”的 Subject,更好的 RxJS 类是 BehaviorSubject。

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

关于angular - 如何为 Subject RxJS observable 分配初始值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43081101/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com