【发布时间】：2021-01-13 01:49:12
【问题描述】：
我订阅了 SignalR 服务，我想将代码推送显示为 Clarity 数据网格。
这是我来自 SignalR 的活动：
export interface TickerMessage {
type: string;
tradeId: number;
sequence: number;
time: Date;
productId: number;
price: number;
side: string;
lastSize: number;
bestBid: number;
bestAsk: number;
}
这是我的服务：
constructor() {
this.retries = 3;
this.hub = new signalR.HubConnectionBuilder()
.withUrl('https://localhost:5001/stream/ticker')
.withAutomaticReconnect()
.build();
}
public async load() {
await this hub.start();
}
public getMessagesAsObservable(): Observable<TickerMessage[]> {
let subj = new Subject<TickerMessage[]>();
this.hub.stream<TickerMessage[]>(this.tickFuncName).subscribe(subj);
return subj.asObservable();
}
这是我的商店：
@Injectable({
providedIn: 'root'
})
export class TickerStore {
private _ticker: BehaviorSubject<Array<TickerMessage>> = new BehaviorSubject<TickerMessage[]>([]);
private _tickerSvc: TickerService;
constructor() {
this._tickerSvc = new TickerService();
this._ticker.asObservable();
}
public async load() {
await this._tickerSvc.load();
this._tickerSvc.getMessagesAsObservable().subscribe(res => {
this._ticker.next(res);
console.log(res);
}, err => {
console.log('error retrieving ticker feed: ' + err);
});
}
get ticks() {
return this._ticker.asObservable();
}
}
这是我的组件：
@Component({
selector: 'app-ticker',
templateUrl: './feed.component.html',
styleUrls: ['./feed.component.css'],
providers: [TickerService],
changeDetection: ChangeDetectionStrategy.Default
})
export class FeedComponent implements OnInit, OnDestroy {
productMap: IProductTypeMap = ProductMap;
productOrderSide: IProductTypeMap = ProductOrderSide;
btcMarketFilter = new BtcMarketFilterComponent();
feed: TickerMessage[];
constructor(public tickerStore: TickerStore) {
this.feed = [];
this.tickerStore.load();
}
async ngOnInit() {
await this.tickerStore.ticks.subscribe(res => {
this.feed = res;
});
}
ngOnDestroy(): void {
}
}
这是我的模板：
<clr-dg-row *ngFor="let m of tickerStore.ticks | async">
<clr-dg-cell>{{m.time | date:'longTime'}}</clr-dg-cell>
<clr-dg-cell>{{m.sequence}}</clr-dg-cell>
<clr-dg-cell>{{m.tradeId}}</clr-dg-cell>
<clr-dg-cell>{{productMap[m.productId]}}</clr-dg-cell>
<clr-dg-cell>{{m.price | currency:'USD'}}</clr-dg-cell>
<clr-dg-cell>{{productOrderSide[m.side]}}</clr-dg-cell>
<clr-dg-cell>{{m.lastSize}}</clr-dg-cell>
<clr-dg-cell>{{m.bestBid | currency:'USD'}}</clr-dg-cell>
<clr-dg-cell>{{m.bestAsk | currency:'USD'}}</clr-dg-cell>
</clr-dg-row>
这是我得到的错误：
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
我尝试tickerStore.ticks 到组件中的一个数组，然后订阅该数组，但这似乎不起作用。如何从消息流中创建一个可观察的数组，以便创建一个代码提要？
【问题讨论】：
-
在您的组件中，您在订阅对象上使用
await，这有什么作用吗？订阅不是异步的。此外，在getMessagesAsObservable()中，您可以只使用share()运算符而不是创建整个主题以进行多播（我假设这就是您使用主题的原因）。 -
我认为我在订阅对象上等待是一种习惯（默认情况下我是 C# 开发人员），IDE 说它没有做任何事情，所以我将其删除。共享运算符是对我现有的优化吗？
标签： javascript angular rxjs signalr observable