Как получить идентификатор кликаемого MatSlideToggle в таблице? - PullRequest
Новая
       12

Как получить идентификатор кликаемого MatSlideToggle в таблице?

0 голосов
/ 25 сентября 2019

enter image description here

У меня есть таблица, которая включает в себя несколько элементов мат-слайд-тумблера.Когда я изменяю любое их значение, я хочу сохранить, какое из них изменилось, и поэтому мне нужны атрибуты id и true или false каждого из них. Я нашел FormControl для управления событием, но у него нет свойства id внутри. Вот что я попробовал ниже

.HTML 

<tr *ngFor="let not of notifications;let i = index"
    [ngStyle]="{ 'background-color': (not.isFinished ? '#dddddd' : 'white') }">
  <th scope="row">{{i + 1}}</th>
  <td>{{not.task}}</td>
  <td>
    <section class="example-section">
      <mat-slide-toggle
        class="example-margin"
        [id]="i"
        [color]="color"
        [checked]="not.isFinished"
        [disabled]="not.isFinished"
        (toggleChange)="onToggleChange($event)"
        [formControl]="activate"
      >
      </mat-slide-toggle>
    </section>
  </td>
</tr>

.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>

TScript 

onChange(value: MatSlideToggleChange) {
    console.log(value);
   }

Ответы [ 4 ]

0 голосов
/ 25 сентября 2019 
//component
 onToggleChange(change:MatSlideToggleChange, index: number)
 {
     console.log('the toggle value is: ' + change.value + ' the id is: ' + index);
 }

//template
 (toggleChange)="onToggleChange($event, i)"
0 голосов
/ 25 сентября 2019

Очень просто передать данные в функцию компонента - вы можете передать любые данные из шаблона.Вы можете передать i или not, если хотите. 

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

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

}

Примечание: toggleChange не излучает $event.Может быть, вы хотите использовать (change), который выдает тип MatSlideToggleChange - API документы 

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

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

}
0 голосов
/ 25 сентября 2019

Вам нужно использовать FormArray. 

  <tr *ngFor="let not of notifications;let i = index" >
  <th scope="row">{{i + 1}}</th>
  <td>{{not.task}}</td>
  <td>
    <section class="example-section">
      <mat-slide-toggle
          [formControl]="forms.controls[i]">
      </mat-slide-toggle>
      </section>
  </td>
</tr>

<button (click)="console()">console values</button>

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)
  }
}

https://stackblitz.com/edit/angular-wte1qt?file=app/slide-toggle-overview-example.ts

0 голосов
/ 25 сентября 2019

У него не будет свойства id, если вы не назначите его.Вы можете добавить свойство id, используя индекс.Оттуда вы можете добавить прослушиватель событий, то есть щелкнуть или изменить и передать переменную $ event, чтобы получить любую информацию о событии, которое только что было инициировано.

...