typescript - 使用 Angular 2+ 无法正确获取 Interval 数据
我在这里显示表格上的动态数据,表格将根据多重下拉选择生成。如果我选择第一个下拉选项,将根据该选项生成第二个下拉选项,然后根据这些生成表格。我希望每 30 秒刷新表格/更新表格数据,以前我使用过 setInterval():
return Observable.interval(30000).flatMap(()=>{
return this.http.get(url + data+'/userid='+ param).map(res => {
return res.json();
});
)};
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap`;
上面的代码运行良好,但问题是即使我在第二个下拉框中选择了一个值,它仍然显示之前的值以及所有下拉框的值。另外,假设我在下拉框中有1、2、3,如果选择2,它会每30秒刷新一次2,同时1和3也会刷新,我也会得到它们的值。
答案#1
你提供的信息很少。但我认为可以根据它来构建问题。有些东西会零散出现。它回答了你的问题
你应该知道的事
- 主题:一个可观察的对象,也可以通过调用
onNext(...)来发出数据。 - switchMap:映射到可观察对象,完成先前的内部可观察对象,发出值。
创建两个主题。当用户选择任何选项时,这些会发出值。
let firstValue$ = new Subject();
function on1stDropdownChanged(newFirstValue) {
firstValue$.next(newFirstValue);
}
let secondValue$ = new Subject();
function on2ndDropdownChanged(newSecondValue) {
secondValue$.next(newSecondValue);
}
此返回基于传递的值所需的数据
function getUserData(firstValue, secondValue): Observable<UserData[]> {
//how ever you want to handle these.
if (firstValue == undefined || secondValue == undefined)
return Observable.of([]); //empty results
return ....
}
此返回需要基于传入的第一个值来确定第二个下拉选项。
function getSecondValues(firstValue): Observable<SecondValue[]> {
//how ever you want to handle these.
if (firstValue == undefined)
return Observable.of([]); //empty results
return ....
}
现在你需要两种类型的事件。
- 当选择第二个下拉菜单时。
- 当下拉菜单变化时获取值,然后每过30秒获取一次
我们将创建一个可观察对象,当第1个和第2个值被选择时发出。一些事情可能会改变。
let when2ndSelected = firstValue$.switchMap( //When 1st selected, wait for below
firstValue =>
getSecondValues(firstValue) // get second options based on first.
.do(secondValues=>...) // whatever you want to do with these
.switchMap(_ => secondValue$) // wait for 2nd selection by user
.map(secondValue=>[firstValue,secondValue]) // map to first second array
)
现在我们将进行用户获取
let timer = Observable.timer(0, 30000) // emit at 0,30,60sec ...
let finalData$ = when2ndSelected
.switchMap(firstSecondValue =>
timer.switchMap(_time => getUserData(firstSecondValue[0], firstSecondValue[1])) //fetches new request at every 30 seconds.
)
这是解决问题的方法。你需要调整它以完全适应你的目的。但我不认为它会失败。
