Как получить ID и значение всех элементов Slide-Toggle

Question

Я задал вопрос, похожий на этот.Но здесь моя проблема немного другая.В столбце таблицы у меня есть элементы Slide-Toggle, которые пользователи могут делать их истинными или ложными неограниченное время.И после этого пользователь может отправить все эти истинные, ложные значения.В моем HTML эти элементы Slide-Toggle происходят из цикла for, который генерируется из массива уведомлений.Какой самый простой и лучший способ получить значения (true, false) из всех этих слайд-переключателей с их идентификаторами? Как я уже говорил, я отправлю их, поэтому я хочу это сделать.Вот что я попробовал ниже

HTML

<h3>Notifications</h3>
    <table class="table" id="thetable">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Tasks</th>
                <th scope="col">IsFinished</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let not of notifications;" 
              [ngStyle]="{ 'background-color': (not.isFinished ? '#dddddd' : 'white') }"
              >
                 <th scope="row">{{not.id+1}}</th>
                  <td>{{not.task}}</td>
                <td>
                        <section class="example-section">
                                <mat-slide-toggle
                                    [id]="not.id"
                                    class="example-margin"
                                    [color]="color"
                                    [checked]="not.isFinished"
                                    [disabled]="not.isFinished"
                                    (change)="onChange($event)"
                                    >
                                </mat-slide-toggle>
                              </section>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="row">
                <div class="col">
                <button mat-raised-button color="primary" (click)="openDialog()">Add Task</button>
                <button mat-raised-button color="primary" (click)="onSave()">Save</button>
            </div>

TypeScirpt (Как сюда поступает массив)

 ngOnInit() {
    this.notifications=this.notificationService.getNotifications();
  }

Answer 1

Переключение привязки с ngModel что-то вроде

<mat-slide-toggle [id]="not.id" class="example-margin" [color]="color"
 [checked]="not.isFinished" [(ngModel)]="not.isFinished"[disabled]="not.isFinished" (change)="onChange($event)" >
 </mat-slide-toggle>

, затем в метод сохранения

 onSave(){
      this.notifications.forEach((n)=>{
      console.log(n.id) //this is the id of your toggle
      console.log(n.isFinished)//this is the value of toggle
      })
    }

ОБНОВЛЕНИЕ

согласно вашемукомментарий, который вы не хотите использовать ngModel, в этом случае вы можете проверить, содержит ли элемент переключателя класс mat-checked в качестве углового материала, добавить проверенный класс, если переключение активно, поэтому удалите ngmodel и измените ваш метод на

 onSave(){
          this.notifications.forEach((n)=>{
          console.log(n.id) //this is the id of your toggle
           var ele=document.getElementById(n.id)
           console.log(ele.classList.contains('mat-checked'))//this is the value 
         of toggle
          })
        }

Answer 2

Если вы хотите получить идентификатор переключенного идентификатора при изменении, передайте not в (change)="onChange(not)".Это для вашей справки, чтобы отслеживать изменения идентификатора, где вы можете создать отдельный массив для него

При сохранении:

onSave(){
  this.finishedNotifications = this.notifications.filter((n) => {
    return n.id && n.isFinished; // filters and returns notifications which are finished only
  })
}

Answer 3

Я думаю, что это сработает:

Пожалуйста, следуйте этому сайту: https://stackblitz.com/edit/mat-slide-toggle-example

Если это не ваш ответ, пожалуйста, дайте мне знать.