网站搜索

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

你提供的信息很少。但我认为可以根据它来构建问题。有些东西会零散出现。它回答了你的问题

你应该知道的事

  1. 主题:一个可观察的对象,也可以通过调用 onNext(...) 来发出数据。
  2. 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 ....
}

现在你需要两种类型的事件。

  1. 当选择第二个下拉菜单时。
  2. 当下拉菜单变化时获取值,然后每过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.
    )

这是解决问题的方法。你需要调整它以完全适应你的目的。但我不认为它会失败。