我有一个简单的应用程序,它包含3件事:

  1. 我有一个介于1和20之间的随机数,无限期显示(间隔)

  2. 2个上下按钮,允许我在每次高级单击+1或-1后更新数字

  3. 单击20次后应禁用按钮的功能(不起作用)

Some of the functions I used in the service and it's important that it stays there

It is important to note that I only need help in the third part (the first 2 parts work for me)

stackblitz年款:

我的服务:

export class ElevatorService {

  floor = new BehaviorSubject<number>(1);
  floorNumber: number = -1;
  Count = 0;


  constructor() {
  }

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

  breakDown(){
    this.Count++;
    if(this.Count >= 20)
    return false;
    return true;
}

我的组件.ts:

 export class AppComponent {
  floor = new BehaviorSubject<number>(1);
  Count = 0;

  ngOnInit(): void {
    this.Count++;
    this.elevatorService.getRandomNumbers().subscribe(this.floor);
  }

  constructor(private elevatorService: ElevatorService) {}

  breakDown() {
    const breakDown = this.elevatorService.breakDown();
    return breakDown;
  }

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

我的组件.html:The breakDown function is called in the attribute of the disable in the up and down functions

<input type="button" value="Up" (click)="up()" [disabled]="breakDown()" />

<input type="button" value="Down" (click)="down()" [disabled]="breakDown()" />

<div class="elevator">
  <pre class="floor">{{ this.floor | async }}</pre>
</div>

推荐答案

我为您创建了一个代码演示,在5次单击后禁用按钮:link to the demo

请根据您的需要随意调整代码.

Angular相关问答推荐

Angular :将动态创建的零部件附加为目标元素的子项

ANGLE DI useFactory将参数传递给工厂函数

Angular 如何观察DOM元素属性的变化?

Component RegisterComponent模板出现Angular 错误

Angular Http 拦截器 - 修改标头会导致 CORS

重新打开模态时 ng-select 中的重复值 - Angular

大型 Angular 12 应用程序 - 我如何管理 js 文件

Angular ngSubmit 不起作用(内部按钮和导入模块)

执行ng generate environments时出错时需要合集和原理图

模块内的命名路由出口 - 路径匹配但内容未加载

使用 RxJS forkJoin 时传递参数的最佳方式

找不到模块'@angular/compiler'

如何从Angular 2 中的按钮单击触发输入文件的单击事件?

设置 Angular Material Tooltip 的字体大小

Electron - 不允许加载本地资源

Angular-CLI 代理到后端不起作用

AOT - Angular 6 - 指令 SomeComponent,预期 0 个参数,但go 有 1 个参数

@angular/platform-b​​rowser 与 @angular/platform-b​​rowser-dynamic

没有 ChildrenOutletContexts 的提供者 (injectionError)

从 Angular 中的自定义表单组件访问 FormControl