复选框取消选中按钮被禁用

Question

在我的stackblitz中，单击复选框后，它将禁用其他按钮。所以我想在这里发生的是：

如果我点击复选框(Sample1(按钮1将被启用。如果未选中按钮1被禁用

希望有人能帮我提前感谢你！

https://stackblitz.com/edit/angular-service-disable-button-il3rqn?file=src/app/services/button-禁用.service.ts

Answer 1

我们总是想控制两个或多个元素"不相关"；我们需要两个或多个变量(或一个数组(

因此，第一步是我们的服务调度一组布尔

export class ButtonDisableService {
private _disableButton: BehaviorSubject<boolean[]> = new BehaviorSubject<boolean[]>([]);
get disableButton(): Observable<boolean[]> {
return this._disableButton.asObservable();
}
//see that we need in toogle indicate the "index"
toogleDisable(index:number){
this._disableButton.value[index]=!this._disableButton.value[index]
this._disableButton.next(this._disableButton.value);
}
}

然后在按钮中，我们使用"；地图"；rxjs运算符只获取数组的一个元素

按钮1

ngOnInit() {
this.disablee = this.buttonDisable.disableButton.pipe(
map((x:boolean[])=>x[0]));
}

和按钮2(我们检查x.length是否>0(

ngOnInit() {
this.disablee = this.buttonDisable.disableButton.pipe(
map((x:boolean[])=>x.length>0?x[1]:null));
}

最后在master.html 中

<input type="checkbox" (click)="toogleButtonStatee(0)">sample1
<input type="checkbox" (click)="toogleButtonStatee(1)">sample2 <br><br>
toogleButtonStatee(index:number){
this.buttonDisable.toogleDisable(index);
}

参见堆叠式

Answer 2

您的方法是正确的。如果希望按钮最初为disabled，请为BehaviorSubject使用不同的初始值。

如果你只想让一个按钮受到影响，那么对你的第二个按钮使用不同的条件(你可能想重新表述你的问题的这一部分；你想要实现的目标还不是100%清楚(。