Question

这里我将在表格上显示动态数据，并将根据多下拉选择生成表格。如果我选择基于第二个下拉选项的第一个下拉选项将生成，并基于此将生成一个表。每隔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次。它们也很清爽，我也得到它们的值。

Answer 1

您收到的信息非常少。但我认为问题可以由它构建。有些事情会在这里和那里。它回答了你的问题

你应该了解的事情

Subject：一个可观察的对象，也可以通过调用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秒传递一次

我们将创建一个observable，当选择第一个和第二个值时，它会发出。有些事情可能会改变。

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.
    )

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

无法使用Angular 2 +

1 个答案: