Angular 如何获取表中已单击切换的id？

我有一个表，其中包括一些超过一个垫幻灯片切换元素。当我更改它们的任何值时，我想存储它们中的哪一个已经更改，因此我需要每个值的id和true或false属性。我找到FormControl来控制事件，但里面没有id属性。下面是我尝试的

.HTML

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

{{i+1}}
{{not.task}}

.TS

activate = new FormControl();

onToggleChange() {
  console.log(this.activate.value);
}

更新 朋友们，我解决了这个问题。谢谢你们的所有答案，我将在这里分享我的解决方案，以帮助那些面对这个问题的人。我找到了

（change）=“onChange（$event）”

并绑定了

ID

HTML

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

---

除非您为其分配id属性，否则它将没有id属性。可以使用索引添加id属性。从那里，您可以添加事件侦听器，即单击，或更改并传入$event变量，以获取有关刚刚触发的事件的任何信息。

将数据传递到组件函数非常简单-您可以从模板传递所需的任何数据。如果愿意，您可以传递

i

或

not

// template
(toggleChange)="onToggleChange(i, not)"

注意：

toggleChange

不会发出

$event

。也许你想使用

（change）

，它会发出type

MatSlideToggleChange

-

---

你需要使用FormArray

{{i+1}}
{{not.task}}
控制台值

---

您从未在HTML模板中添加

id

属性。您想要哪个id？您正在谈论通知Id吗？除非您为其分配了Id属性，否则它将没有Id属性。您可以使用索引添加id属性。我需要这些MatSlideToggle元素单击时的id为什么不添加通知id并使用它？您的最终目标是什么？我编辑了我的解决方案，并将其按如下方式组合：[id]=“I”。那么，当单击时，如何才能达到此目的？$event是一个保留字，它将提供有关刚刚触发的事件的信息，例如DOM元素和属性，什么类型的事件，等等。控制台日志或目录记录该事件。当我单击其中任何一个事件时，$event为我提供了未定义的注释添加了发生这种情况的原因。

// component
onToggleChange(i: number, not) {

}

// template
(change)="onToggleChange($event, i, not)"

// component
onToggleChange(event: MatSlideToggleChange, i: number, not) {

}

import {Component} from '@angular/core';
import { FormBuilder } from '@angular/forms';

/**
 * @title Basic slide-toggles
 */
@Component({
  selector: 'slide-toggle-overview-example',
  templateUrl: 'slide-toggle-overview-example.html',
  styleUrls: ['slide-toggle-overview-example.css'],
})
export class SlideToggleOverviewExample {

  notifications = [
    {
      isFinished: false
    },
    {
      isFinished: true
    },
    {
      isFinished: false
    },
    {
      isFinished: true
    }
  ]

  forms;

  constructor(private formBuilder: FormBuilder) {
    this.forms = this.formBuilder.array(
      this.notifications.map(e => this.formBuilder.control(e.isFinished))
    );
  }

  console() {
    console.log(this.forms.value)
  }
}

//component
 onToggleChange(change:MatSlideToggleChange, index: number)
 {
     console.log('the toggle value is: ' + change.value + ' the id is: ' + index);
 }

//template
 (toggleChange)="onToggleChange($event, i)"