Angular 7 和 RxJS 可观察对象答案

【问题标题】：Angular 7 and RxJS observablesAngular 7 和 RxJS 可观察对象
【发布时间】：2019-02-06 19:56:03
【问题描述】：

我目前正在尝试掌握 RxJs 的功能。首先，我想将两个 observable 与“concat”函数结合起来。没有成功，很遗憾。这是我的代码：

组件 =>

import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { interval, range, concat } from 'rxjs';

@Component({
  selector: 'app-appareils',
  templateUrl: './appareils.component.html',
  styleUrls: ['./appareils.component.scss']
})
export class AppareilsComponent implements OnInit {


  constructor(private appareilsService : AppareilsService ) {
  }

  ngOnInit() {

    var counter = interval(1000)
    var sequence = range(1, 10)
    var concat(counter,sequence)

    concat.subscribe(
      (value) => {
        this.rxjsValue = value
      },
      (error) => {
        console.log('Uh-oh, an error occurred! : ' + error);
      },
      () => {
        console.log('Observable complete!');
      }
    )
  }

}

模板 =>

<p>
{{ rxjsValue }} 
</p>

所以想法是每一秒，rxJsValue 在模板中被编辑并呈现给查看。由于我严格遵守文档，我很困惑，我不得不承认：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-concat

我看不出逻辑中的缺陷，谁能指出问题出在哪里？

【问题讨论】：

而不是var concat(counter,sequence)，也许是const concat = concat(counter, sequence)，它返回一个你可以订阅的可观察对象
您是否打算显示一个以1 开始并以10 结束的计数器，每秒更新一次？ stackblitz.com/edit/angular-lm2aaz
谢谢你们的回答。 Linhh，我已经尝试了您的解决方案，但它以未定义的错误迎接我。有点奇怪，看起来该功能根本无法识别。亚历山大，是的，这正是我的观点！

标签： angular rxjs observable

【解决方案1】：

您可以通过使用interval 以及运算符take 和map 结合async 管道来实现以下目标：

组件：

import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  rxjsValue$: Observable<number>;

  ngOnInit() {
    this.rxjsValue$ = interval(1000).pipe(take(10), map(r => r + 1));
  }
}

模板：

{{rxjsValue$ | async}}

这里有一个example 正在使用中。

在您的示例中，您有两行单独的import 语句，均来自rxjs，这可能会导致编译错误。至少，它们需要合并到一个语句中：

import { Observable, interval, range, concat } from 'rxjs';

希望对您有所帮助！

【讨论】：

优雅的解决方案，非常有帮助！非常感谢您的贡献
您也可以考虑查看 learn-rxjs 文档中的 Smart Counter 示例以获取更高级的方法。
我会检查这个！非常感谢

【解决方案2】：

我不太明白你为什么要使用 concat，你可以在这里看到我为你做的一个工作示例https://stackblitz.com/edit/angular-abxeqw

【讨论】：

非常感谢您的示例，非常明确。实际上，就我而言， concat 函数本身并没有实现目的，它背后没有逻辑。探索 RXJS 的功能只不过是一个练习。编辑：再次感谢您的视频，我现在会检查它！
如果你正在学习，我告诉你的视频可以帮助你很多，一个学习rxjs的好页面（我认为比官方文档更好）learnrxjs.io@FitzChevalerie
再次感谢您！有一些额外的文档总是好的