如何获取所有 Slide-Toggle 元素的 ID 和值

Question

我问了一个类似的问题。但在这里我的问题有点不同。在表格列中，我有 Slide-Toggle 元素，用户可以无限时间将它们设为 true 或 false。之后有一个按钮，用户可以提交所有这些真值和假值。在我的 HTML 中，那些 Slide-Toggle 元素来自 for 循环，它是从通知数组生成的。获取所有带有 ID 的滑动开关的值（真、假）的最简单和最好的方法是什么？正如我提到的，我将提交它们，这就是我想要这样做的原因。这是我在下面尝试的

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

如果你想获得变革切换ID的ID，通过not在(change)="onChange(not)"。这是供您参考以跟踪 id 的更改，您可以在其中为其创建单独的数组保存时：onSave(){&nbsp; this.finishedNotifications = this.notifications.filter((n) => {&nbsp; &nbsp; return n.id && n.isFinished; // filters and returns notifications which are finished only&nbsp; })}