在 Angular2 中修改 Observable 会导致 BehaviorSubject 触发
Modifying Observable in Angular2 Causes BehaviorSubject to Fire
在下面的代码中,当您单击 Select 市场时,Observable 会填充一组数据。第一项以黄色突出显示,因为它有一个 属性 设置为选中。当焦点位于输入框上时,您可以在列表中向下箭头。问题是 BehaviorSubject 每次都会触发并从服务器获取数据列表。如何在每次不触发 searchTerms BehaviorSubject 的情况下修改选定的 属性? market-search.component.ts 文件中的方法 searchInputArrowKeyPressed 是处理方向键的地方。
public searchInputArrowKeyPressed(event): void {
this.markets = this.markets
.map((markets: Market[]) => {
for(let market of markets) {
if(market.selected) {
if(event === 'down' && markets.indexOf(market) < markets.length) {
markets[markets.indexOf(market) + 1].selected = true;
}
if(event === 'up' && markets.indexOf(market) > 0) {
markets[markets.indexOf(market) - 1].selected = true;
}
market.selected = false;
return markets;
}
}
});
}
https://plnkr.co/edit/TBYb5QBau9Vmz8PqQpCl?p=preview
提前感谢您的帮助!
我同意@n00dl3,重新分配流看起来不自然。我已经修改了您的 plunker,以便每个事件(数据、搜索、up/down 和输入)都有自己的流。例如:
public searchInputArrowKeyPressed(event): void {
this.upDownEvents.next(event);
}
数据的修改是通过在数据流中推送更新的数组来完成的。
this.upDownEvents
.withLatestFrom(this.markets)
.subscribe(([event, markets]) => {
for(let market of markets) {
if(market.selected) {
// change selected
this.markets.next(markets);
return;
}
}
});
请看here
在下面的代码中,当您单击 Select 市场时,Observable 会填充一组数据。第一项以黄色突出显示,因为它有一个 属性 设置为选中。当焦点位于输入框上时,您可以在列表中向下箭头。问题是 BehaviorSubject 每次都会触发并从服务器获取数据列表。如何在每次不触发 searchTerms BehaviorSubject 的情况下修改选定的 属性? market-search.component.ts 文件中的方法 searchInputArrowKeyPressed 是处理方向键的地方。
public searchInputArrowKeyPressed(event): void {
this.markets = this.markets
.map((markets: Market[]) => {
for(let market of markets) {
if(market.selected) {
if(event === 'down' && markets.indexOf(market) < markets.length) {
markets[markets.indexOf(market) + 1].selected = true;
}
if(event === 'up' && markets.indexOf(market) > 0) {
markets[markets.indexOf(market) - 1].selected = true;
}
market.selected = false;
return markets;
}
}
});
}
https://plnkr.co/edit/TBYb5QBau9Vmz8PqQpCl?p=preview
提前感谢您的帮助!
我同意@n00dl3,重新分配流看起来不自然。我已经修改了您的 plunker,以便每个事件(数据、搜索、up/down 和输入)都有自己的流。例如:
public searchInputArrowKeyPressed(event): void {
this.upDownEvents.next(event);
}
数据的修改是通过在数据流中推送更新的数组来完成的。
this.upDownEvents
.withLatestFrom(this.markets)
.subscribe(([event, markets]) => {
for(let market of markets) {
if(market.selected) {
// change selected
this.markets.next(markets);
return;
}
}
});
请看here