Angular 7和RxJS可觀察對象

Question

我目前正在嘗試擺脫RxJs函數的困擾。 首先，我想將兩個可觀察對象與“ 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

我看不到邏輯上的缺陷，有人可以指出我的問題所在嗎？

Answer 1

您可以通過使用interval以及運算符take和與async管道結合使用map來實現以下目的：

零件：

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}}

這是一個實際的例子 。

在您的示例問題中，您有兩行分別來自rxjs的import語句，這可能會導致編譯錯誤。 至少，它們需要合並到一個語句中：

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

希望有幫助！

Answer 2

我不太了解您為什么使用concat，您可以在這里看到我對您所做的工作示例https://stackblitz.com/edit/angular-abxeqw