(Angular) 禁用或启用复选框 <mat-slide-toggle>

Question

我有一个可供团队选择的用户列表。想象一下，我选择了一个用户，他在他的团队中可以是活跃的也可以是不活跃的。现在，如果我根本不选择他，我应该无法激活或停用他。 这是由一个复选框和一个滑块组成的，如下所示：

当我单击复选框时，我需要禁用切换。我试过这样做：

$("#2048").prop('disabled', true);

或

document.querySelector('[name="' + '#2048' + '"]').disabled = true;

也不起作用（是的，我知道 ID 不应该是数字，但这是因为每个切换都在 *ngFor 内。不过，我可以将它们用作数字，因为 jQuery 无论如何都可以选择它们）

无论哪种方式，我坚信做这样的事情的唯一方法是将“禁用”属性数据绑定为一些返回“真”或“假”值的后端变量。

类似：

<mat-slide-toggle 
[id]='data.id' 
class="status" 
[disabled]='disableVariable'
>Active
</mat-slide-toggle>

然后：

disableVariable = someFunction(); //that returns true or false

这可行，但变量“太通用”，我的意思是，每个滑块都将被禁用。另一个问题是这不是“实时”的，所以我不能多次禁用和启用。
基本上，它不做这项工作。

我应该在这里做什么？如果我有办法使用它们的唯一 ID 选择这些标签，那将解决问题，但 jQuery 或 Javascript 的查询选择器都不能禁用或启用此标签。

编辑：

多一点我的代码：

    <div id="table" *ngFor="let data of User; let i = index">

        <div [id]='data.id' *ngIf='data.user== 0' class="item">

            <label class="container" style="width: 90%">

                <input
                type="checkbox" 
                *ngIf='data.status== 0' 
                id={{i}} 
                class="checkbox" 
                color=primary
                checked>

                <span class="checkmark"></span>

                <div *ngIf='data.status== 0'>{{data.name}}

                    <mat-slide-toggle 
                    [id]='data.id' 
                    (change)=toggle(data.id) 
                    *ngIf='data.status== 0'
                    color=primary 
                    class="status" 
                    >Active
                    </mat-slide-toggle>

                </div>
            </label>
        </div>
    </div>

当我添加 ([ngModel)] 时，我的复选框停止工作，是的，我正在导入 FormsModule

Answer 1

您可以使用双向绑定来更新复选框的状态，如下所示：

将[(ngModel)] 和 disabled 属性添加到输入字段

// Declare variable in component
CheckboxVar:boolean;

// In Html write below code
<input type="checkbox" [(ngModel)]="CheckboxVar" [disabled]="!CheckboxVar">

// Disabled checkbox when checkboxvar = false;
<input type="checkbox" [disabled]="!CheckboxVar">

根据您的组件需要更新 CheckboxVar 变量。

mat-slide-toggle 示例

TS 代码：

checked = false;
disabled = false;

HTML 代码：

<input type="checkbox" [(ngModel)]="checked">
<mat-slide-toggle [disabled]="checked">
    Slide me!
</mat-slide-toggle>

现在在上面的例子中，如果你选中了复选框，checked 变量将被更新，如果选中等于 true，那么你的切换将被禁用。

Answer 2

如果我正确理解要求：

HTML 代码：

<div *ngFor="let obj of list">
  <mat-checkbox [(ngModel)]="obj.inTeam">In Team</mat-checkbox>
  <br><br>
  <mat-slide-toggle [(ngModel)]="obj.inTeam">Active</mat-slide-toggle>
</div>

TS 代码：

list = [
    { id : 1,inTeam: false, isActive: false },
    { id : 3,inTeam: false, isActive: false },
    { id : 3,inTeam: false, isActive: false },
    { id : 4,inTeam: false, isActive: false }
]

StackBlitz