(Угловой) Сделать флажок отключить или включить <mat-slide-toggle>

Question

У меня есть список пользователей, которых нужно выбрать для команды. Представьте, что я выбираю пользователя, он может быть активным или неактивным в своей команде. Теперь, если я его вообще не выберу, я не смогу ни активировать, ни деактивировать его. Это сделано с помощью флажка и ползунка, например:

Когда я нажимаю флажок, мне нужно отключить переключатель. Я пытался сделать это с помощью:

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

или

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

Также не работает (И да, я знаю, что идентификаторы не должны быть числами, но это потому, что каждый переключатель находится внутри * ngFor. Тем не менее, я могу использовать их как числа, так как jQuery может выбрать их в любом случае)

В любом случае, я твердо верю, что единственный способ сделать что-то подобное - привязать данные к атрибуту «disabled» как к некоторой внутренней переменной, которая возвращает значение «true» или «false».

Что-то вроде:

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

и затем:

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

Это работает, но переменная «слишком общая», я имею в виду, что каждый отдельный слайдер станет отключенным. Другая проблема заключается в том, что это не «в режиме реального времени», поэтому я не могу отключить и включить несколько раз.
В основном это не делает работу.

Что мне здесь делать? Если бы у меня был способ выбрать эти теги, используя их уникальные идентификаторы, это решило бы проблему, но ни jQuery, ни селектор запросов Javascript не могут отключить или включить этот тег.

EDIT:

Немного больше моего кода:

    <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

Если я правильно понимаю требование:

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

Answer 2

Вы можете использовать двустороннюю привязку для обновления статуса флажка следующим образом:

Добавить [(ngModel)] и отключить свойство в поле ввода

// 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 переменную в соответствии с вашими потребностями в вашем компоненте.

Пример с мат-слайдом-тумблером

Код TS:

checked = false;
disabled = false;

HTML код:

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

Теперь в приведенном выше примере, если вы установили флажок, проверяемая переменная будет обновлена, и если флажок равен true, то ваш переключатель будет отключен.