我有一個簡單的應用程式，其中包含 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;
}
我的組件.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：在up和down函式中disable的屬性中呼叫breakDown函式
<input type="button" value="Up" (click)="up()" [disabled]="breakDown()" />
<input type="button" value="Down" (click)="down()" [disabled]="breakDown()" />
<div >
<pre >{{ this.floor | async }}</pre>
</div>
uj5u.com熱心網友回復：
我為您創建了一個代碼演示，在單擊 5 次后禁用該按鈕：鏈接到演示
請隨時根據您的需要調整代碼。
uj5u.com熱心網友回復：
我認為問題是， disabled 屬性只被觸發一次。嘗試將 [disabled] 屬性系結到變數并在每次單擊時更新它。然后通過分解功能在每次點擊時重新分配變數。就像是：
偽代碼：
component.ts:
upDisabled: boolean;
up(){
this.upDisabled = this.breakDown();
}
component.html:
<input type="button" value="Up" (click)="up()" [disabled]="upDisabled" />
當然你也可以在這些函式中做其他的事情。
編輯：請查看@Havald 對此問題的回答：“@NadavPall 看看這個Stackblitz。在您的示例中，如果值為 <= 20，則回傳 true 以禁用按鈕，因此在第一次單擊時會被禁用。”
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/485628.html
標籤：有角度的
上一篇：如何防止從Angular可觀察訂閱觸發的API呼叫重疊？
下一篇：錯誤TS2322：型別“數字”不可分配給型別“字串”。[currentPrice]="listing.price"