Angular：將間隔與增量和減量相結合

我每隔一段時間就有一個介于 1 到 20 之間的亂數。我需要添加按鈕來上下移動。（遞增和遞減）。 我無法將我的間隔與我的函式結合起來

我的堆疊閃電戰：https ://stackblitz.com/edit/angular-ivy-zbrapb?file=src/app/app.component.ts,src/app/app.component.html,src/app/app.component.css

執行 1 到 20 之間的亂數的函式：

  floor!: Observable<Number>;
  floorNumber = -1;

  ngOnInit(): void {
    this.floor = this.getNumbersInfinite();
  }

  getNumbersInfinite() {
    return interval(1000)
    .pipe(
      map(() => Math.floor(Math.random() * 20)   1),
      tap(res =>this.floorNumber=res));
  }

上下執行不成功：

 up(){
    if (Number(this.floorNumber) < 20 && Number(this.floorNumber) >= 1) {
       return Number(this.floorNumber  );
    }
    return false;
  }
  down(){
    if (Number(this.floorNumber) < 20 && Number(this.floorNumber) >= 1) {
       return Number(this.floorNumber--);
    }
    return false;
  }

html:

<p>
  {{ floor | async }}
</p>

<input type="button" value="Up" (click)="up()" />
<input type="button" value="down" (click)="down()" />

uj5u.com熱心網友回復：

這應該可以解決問題

export class AppComponent implements OnInit {
  floor = new ReplaySubject<number>(1);

  ngOnInit(): void {
    this.getNumbersInfinite();
  }

  getNumbersInfinite() {
    return interval(1000)
      .pipe(map(() => Math.floor(Math.random() * 20)   1))
      .subscribe(this.floor);
  }

  up() {
    this.floor
      .pipe(
        take(1),
        filter((v) => v < 20),
        map((v) => v   1)
      )
      .subscribe((v) => this.floor.next(v));
  }

  down() {
    this.floor
      .pipe(
        take(1),
        filter((v) => v > 1),
        map((v) => v - 1)
      )
      .subscribe((v) => this.floor.next(v));
  }
}

https://stackblitz.com/edit/angular-ivy-dxu7xx?file=src/app/app.component.ts,src/app/app.component.html,src/app/app.component.css

uj5u.com熱心網友回復：

您可以使用該merge()函式將三個動作合并為一個 observable。每次從可觀察物件之一發生事件時，該值將被發送到模板。

在此處查看一個作業示例。

新模板幾乎相同，我們現在洗掉了點擊事件并在 TypeScript 中使用fromEvent().

<p>
  {{ output$ | async }}
</p>

<input type="button" value="Up" #up />
<input type="button" value="down" #down />

TypeScript 將：

• 創建 up 事件
• 創建向下事件
• 創建區間
• 聽所有三個并發出一個可觀察的

export class AppComponent implements AfterViewInit {
  // The current value
  current = 1;

  // Create an Observable from the click event of the up button
  up$!: Observable<number>;
  @ViewChild('up')
  set up(val: ElementRef<HTMLButtonElement>) {
    this.up$ = fromEvent(val.nativeElement, 'click').pipe(
      filter(() => this.current < 20),
      map(() =>   this.current)
    );
  }

  // Create an Observable from the click event of the down button
  down$!: Observable<number>;
  @ViewChild('down')
  set down(val: ElementRef<HTMLButtonElement>) {
    this.down$ = fromEvent(val.nativeElement, 'click').pipe(
      filter(() => this.current > 0),
      map(() => --this.current)
    );
  }

  // Create a timer observable that fires every "x" milliseconds
  interval$ = () =>
    timer(0, 1000).pipe(
      map(() => Math.floor(Math.random() * 20)   1),
      tap((i) => (this.current = i))
    );

  output$?: Observable<number>;

  // We need to merge here so the buttons are ready.
  // Merging sooner will cause an `undefined` error for the buttons
  ngAfterViewInit() {
    // Merge the three observables and send the results to the template
    this.output$ = merge(this.up$, this.down$, this.interval$());
  }
}

標籤：有角度的

上一篇：如何使用ngx-translate將標簽例如en更改為英語

下一篇：鍵入“串列|undefined'不可分配給型別'Listing'。型別“未定義”不可分配給型別“串列”