Question

我正在用angular制作一个基本的切换应用程序。我有两个切换按钮。我在切换中显示一条消息。我想在切换更改时调用相同的功能，但根据切换哪个按钮来做不同的事情。可能还是我必须使用两个不同的功能？预先感谢您的帮助。

这是我的模板代码：

<mat-card class="card" fxLayout="column" fxLayoutAlign="center center" >
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>

  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event);displayMessage($event)"   formControlName="Policy1" >
      <span class="label">{{message}}</span></mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>

  </mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-raised-button [disabled]="disable" class="button" type="submit">Save Settings</button>

</form>
</mat-card>

我从切换按钮调用的功能：

  displayMessage(e){
    if(e.checked)
    {
      this.message = 'Toggled';
    }
      else
      this.message = 'Slide';

  }

Answer 1

来自$event发射器的(change)对象具有一个srcElement，当您要找出引起更改的元素时可以参考。

如果要检索调用该函数的元素的ID，请使用event.srcElement.id

Answer 2

您可以将更多参数传递给处理程序：

<mat-slide-toggle *ngFor="let item of thingsToDo; let i = index"
   (change)= "onToggle($event, item.id, i)">

onToggle = (event, id, indexInArray) => { //...

在同一个函数中执行不同的操作，具体取决于哪个HTML组件调用了该函数

2 个答案: