Angular：尝试在点击次数后禁用按钮

Question

我有一个简单的应用程序，其中包含 3 个东西：

我有一个1到20之间的随机数无限显示（间隔）
2 个向上和向下按钮，让我可以在每次高级点击 +1 或 -1 后更新数字
点击 20 次后应禁用按钮的功能（不起作用） (有breakDown功能)

我在服务中使用的一些功能，重要的是保留在那里

重要的是要注意我只需要第三部分的帮助（前两部分对我有用）

我的服务：

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

我的component.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));
  }

我的component.html:breakDown函数是在up和down函数中disable的属性中调用的

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

Answer 1

我认为问题是，禁用的属性只被触发一次。尝试将 [disabled] 属性绑定到一个变量并在每次点击时更新它。然后通过细分功能在每次点击时重新分配变量。类似于：

伪代码：

    component.ts:
    upDisabled: boolean;

    up(){
      this.upDisabled = this.breakDown();
    }

    component.html:
    <input type="button" value="Up" (click)="up()" [disabled]="upDisabled" />

当然你也可以在这些函数中做其他的事情。

编辑：请看@Havald 对这个问题的回答： “@NadavPall 看看这个 Stackblitz。在你的例子中你 return true 禁用按钮，如果值 <= 20 所以它在第一次点击时被禁用。”

Answer 2

我为您创建了一个代码演示，可在点击 5 次后禁用该按钮：link to the demo

请随时根据您的需要调整代码。

Angular：尝试在点击次数后禁用按钮

Angular: Trying to disable button after amount of clicks

angular