如何获取所有 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(){

  this.finishedNotifications = this.notifications.filter((n) => {

    return n.id && n.isFinished; // filters and returns notifications which are finished only

  })

}