Question

我有一个get方法，该方法从API检索具有每分钟变化的值的数据。此数据需要每分钟与静态数据相乘，并显示给用户。我决定使用管道来处理此事务，因为此数据将在整个应用程序本身中频繁使用。

我的问题是，在实施此管道时，在循环中运行时，它将获取管道中的最后一个静态值，并为所有已通过的值进行更改。

我想要传递的单个静态值的乘数值。并以可观察的方式返回到用户界面。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private service: AppService,private http: HttpClient) {}
  private fetchDataTemp$: Observable<any>;

  private killTrigger: Subject<void> = new Subject();

  private refreshIntervalTemp$: Observable<any> = timer(0, 60000)
    .pipe(
      // This kills the request if the user closes the component 
      takeUntil(this.killTrigger),
      // switchMap cancels the last request, if no response have been received since last tick
      switchMap(() => this.fetchDataTemp$),
      // catchError handles http throws 
      catchError(error => of('0'))
   );

  getData() {
    return this.http.get("https://jsonplaceholder.typicode.com/posts/42")
      .pipe(
        retry(3),
        share()
      );
  }

  public tempdata$: Observable<any> = this.refreshIntervalTemp$;
  fakedata = [1,2,3];

  ngOnInit() {  
    this.fakedata.forEach(element => {
      this.tempdata$.subscribe(data => { console.log(data,"test"); }); 
      console.log(element);  

      this.fetchDataTemp$ = this.getPrice().pipe(
        map(
          (response) => {
            console.log(element*response.id as number)
            return response.id;
          },
          share()
        )
      ); 
    });
  }
}

上面的代码与我要实现的场景非常相似。 fakedata是传递到管道中的数据，而foreach是使用异步运行的ngFor循环。网址https://jsonplaceholder.typicode.com/posts/42 在这种情况下会返回静态数据，因此我能够保持数据一致response.id is 42。运行此代码时，结果为

1
2
3
126 test 
126 test 
126 test

我期望的是

 1
 2
 3
 42 test
 84 test
 126 test

我已将问题定位到map()，但是我不知道如何强制映射一次处理一个值并相应地返回它们。

提前谢谢！

想要返回带有管道的新可观察对象，并每次都传递新数据。使用Angular 6

0 个答案: