Angular 角度4-用于流的NGF

这是我的例子：

my list.component.ts:

export class MyList implements OnInit {
  values: Observable<number>;
  ngOnInit(){
   this.values= Observable
    .from([1, 2, 3, 4, 5])
    .map(function (value) { return Observable.of(value).delay(2000); })
    .concatAll();
//    this.values.subscribe(x => console.log(x)); this is OK
  }
}

<div *ngFor="let v of values|async">
  {{v}}
</div>

---

我不明白如何使用异步管道。谢谢

concatAll

不会将结果合并到数组中。相反，它会让你的观察值（延迟数）一个接一个地链起来。我认为你想要达到的是

  this.values= Observable
    .from([1, 2, 3, 4, 5])
    .map(function (value) { return Observable.of(value).delay(2000); })
    .concatAll()
//    .subscribe(x => console.log(x)); here this would emit 1 then 2 then 3 ...
    .scan((array, nextValue) => array.concat(nextValue), [])
//    .subscribe(x => console.log(x)); here this would emit [1] then [1,2] then [1,2,3]... 

使用此

scan

每次出现新事件时，您都将获得聚合数组

您可以使用.scan（）运算符

---

它的行为非常类似于数组上的.reduce。（rx.reduce（）操作符也会这样做，但仅当可观察对象完成时才会发出）

角度8答案-应转换为角度4

---

console.log（值）

并显示output@bluray，当您使

variable=Observable（…）

时，您将“variable”等同于可观测值，而不是结果。您需要将这个.value=x写入订阅函数*ngFor，因为这里收到了一个数字-1-as参数。当然，这是不可容忍的。你的用例是什么？您希望实现什么？我希望在收到值时显示这些值。首先它会显示1，两秒后1，2秒后1，2，3…我以为它是在做异步管道

  this.values= Observable
    .from([1, 2, 3, 4, 5])
    .map(function (value) { return Observable.of(value).delay(2000); })
    .concatAll()
//    .subscribe(x => console.log(x)); here this would emit 1 then 2 then 3 ...
    .scan((array, nextValue) => array.concat(nextValue), [])
//    .subscribe(x => console.log(x)); here this would emit [1] then [1,2] then [1,2,3]... 

this.values= Observable
    .from([1, 2, 3, 4, 5])
    .map(function (value) { return Observable.of(value).delay(2000); })
    .concatAll().
    .scan((acc, value) => [...acc, value], []);

import { Component } from '@angular/core';
import { Observable, of, from, interval} from 'rxjs'
import { map, delay, tap, scan, skip, takeWhile } from 'rxjs/operators'

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let v of values$|async">
      {{v}}
    </div>
  `

})
export class AppComponent  {
  values$: Observable<number[]>;
  ngOnInit(){

    // streams
    const counter$ = interval(1000)

    this.values$ = counter$.pipe(
      skip(1),
      scan((acc, cur) => {
        return [ ...acc, cur]
      }, []),
      takeWhile(arr => arr.length < 20) // <--- some end condition
    )
  }
}

<div *ngFor="let v of values$ | async">
  {{v}}
</div>

<div *ngFor="let v of values">
  {{v}}
</div>

values$.subscribe(values => this.values = values)