我有一个简单的应用程序,它包含3件事:
-
我有一个介于1和20之间的随机数,无限期显示(间隔)
-
2个上下按钮,允许我在每次高级单击+1或-1后更新数字
-
单击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>