#html #angular #typescript
#HTML #угловатый #машинописный текст
Вопрос:
Я создаю базовое приложение для переключения в angular.У меня есть две кнопки переключения.Я показываю сообщение в toggle.Я хочу вызвать ту же функцию при переключении, но делать разные вещи в зависимости от того, какая кнопка была переключена.Возможно ли это или я должен использовать две разные функции? Заранее спасибо за помощь.
Вот мой код шаблона:
<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';
}
Комментарии:
1. Проверьте this:stackblitz.com/edit/angular-heiutf
2. не могли бы вы привести пример stackblitz?
3. @PrashantPimpale Я пытаюсь сделать это только в одной функции вместо того, чтобы использовать другую функцию
Ответ №1:
$event
Объект из (change)
источника имеет a srcElement
, на который вы можете ссылаться, когда хотите выяснить, какой элемент вызвал изменение.
Если вы хотите получить идентификатор элемента, который вызвал функцию, вы делаете это с помощью event.srcElement.id
Комментарии:
1. Это, вероятно, будет работать, но не совсем по-угловому. @mbojko ответ более идиоматичен
2. Я не могу получить идентификатор. Я получаю сообщение об ошибке Не удается прочитать свойство ‘id’ undefined, когда я пытаюсь получить идентификатор с помощью e.srcElement.id . Какие-либо изменения, которые я должен внести в код шаблона?
Ответ №2:
Вы можете передать обработчику больше аргументов:
<mat-slide-toggle *ngFor="let item of thingsToDo; let i = index"
(change)= "onToggle($event, item.id, i)">
onToggle = (event, id, indexInArray) => { //...