(Angular) Использование jQuery (или чистого JS) для проверки конкретных переключателей mat-slide-toggles

Question

Я использую Angular Material, в данном конкретном случае, тег <mat-slide-toggle'> внутри * ngFor. Когда страница загружается, она обращается к моей базе данных, чтобы увидеть, какие из них следует проверить, а какие нет. Их очень небольшое количество (около 20%), поэтому они по умолчанию не проверены. Когда мой API дает ответ базы данных, angular должен получить идентификаторы переключателей, которые должны быть проверены, и проверить их. Я использую эту логику для проверки некоторых флажков, и она работает, но с <mat-slide-toggle> Jquery, похоже, не взаимодействует.

Вот как я это делаю,

Ползунки:

<div id="table" *ngFor="let data of User; let i = index">
      <mat-slide-toggle  
      disabled
      [id]='data.code15'
      (change)=toggle(data.code15)
      color=primary 
      class="status">Active
      </mat-slide-toggle>
</div>

Логика, которая должна их проверять (это я гарантирую на 100%, что она работает, она просто не может их проверить, но может соответствующим образом console.log их идентификаторы):

for(var i = 0 ; i < this.IntArray.length ; i++){
  if(this.IntArray[i].status == 0){
    console.log("Toggle's ID: " + $("#"+this.IntArray[i].user.toString()).attr('id')); 
    //this is the correct console log
    $("#"+this.IntArray[i].code15.toString()).prop('checked', true); 
    //this should check them (code15 is the ID of each toggle)
  }
}

Проблема здесь в том, что переключение не отвечает на команду jQuery (в отличие от моих флажков с очень похожей логикой). Я не могу заставить переключатели проверить. Есть ли другой способ?

Кстати, проблема использования <mat-slide-toggle [checked]=foo> заключается в том, что глобальная переменная 'foo' не получит никакого значения, так как странице требуется как минимум полсекунды, чтобы получить ответ из БД (который довольно полон) .

У меня нет вариантов здесь, мне действительно нужен тумблер, так как он более «удобный» и стильный, чем переключатели, а также проще в CSS.

Какие-нибудь советы? JQuery или JS принимаются ...

Answer 1

Вы можете сделать следующее, чтобы выполнить это ... это будет Angular / JS, а не jQuery

Я не знаю формат ваших данных, возвращаемых из БД, поэтому я сделал простойфиктивный массив для демонстрационных целей.

Я предполагаю, что в вашем массиве есть значение из db, которое определяет, следует ли проверять слайдер ... здесь я просто использую логическое значение с ключом checked

 User = [
    { id: 1, checked: true },
    { id: 2, checked: false },
    { id: 3, checked: false },
    { id: 4, checked: true },
    { id: 5, checked: false },
    { id: 6, checked: false },
  ]

Затем я использую @ViewChildren, чтобы получить все ползунки в DOM

import { MatSlideToggle } from '@angular/material'
@ViewChildren(MatSlideToggle) toggleArray

После ViewInit перебрать массив ползунков в DOM и сравнить их с User массив и установить те, которые должны быть проверены.

Я устанавливаю ползунки на checked после ViewInit здесь, вы можете выполнить эту логику, когда ответ возвращается из БД, и он будетработать так же.

 ngAfterViewInit() {
    this.toggleArray.toArray().forEach((el) => {
      let i = this.User.findIndex(u => el.id == u.id)
      if (this.User[i].checked) {
        el.checked = true;
      }
    })
  }

Stackblitz

https://stackblitz.com/edit/angular-idbj9c?embed=1&file=app/slide-toggle-overview-example.ts