Добавление события изменения Angular 6 в выпадающий список приводит к ошибке неопределенного значения
У меня есть выпадающий список, созданный в каждой строке данных:
<ng-container matColumnDef="status_change">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Change Status</th>
<td mat-header *matCellDef="let row">
<mat-form-field>
<form [formGroup]="sitStatus">
<mat-select (click)="updateUnitSituationStatus()" formControlName="sitStatusControl" placeholder="Change Status To">
<!-- <mat-option [value]="row.unit_sprotection_status">{{row.unit_sprotection_status}}</mat-option> -->
<mat-option *ngIf="row.unit_sprotection_status!='Active'" value="Active">Active</mat-option>
<mat-option *ngIf="row.unit_sprotection_status!='Inactive'" value="Inactive">Inactive</mat-option>
</mat-select>
</form>
</mat-form-field>
</td>
</ng-container>
Я добавил событие, чтобы получить значение измененного выпадающего списка. Другими словами, если я изменил значение раскрывающегося списка в строке с идентификатором 4, мне необходимо изменить значение и идентификатор строки, чтобы я мог обновить свою базу данных.
я использовал (click)
событие, но появилась ошибка:
ОШИБКА TypeError: Невозможно прочитать свойство 'value' из undefined в UnitEditComponent.push
Вот метод:
updateUnitSituationStatus(){
console.log(this.formGroup.controls['sitStatusControl'].value);
}
Я пытался использовать (change)
событие, но ничего не произошло тоже.
2 ответа
Так как вы используете sitStatus
сформировать группу здесь <form [formGroup]="sitStatus">
Вы должны искать контроль в этой группе, а также
this.sitStatus.controls['sitStatusControl'].value
Я не пробовал использовать Material UI, но считаю, что он работает так же, как обычно select
<select (change)="onChangeEvent($event)">
<option value="option1">My Options</option>
</select>
Тогда в вашем .ts
onChangeEvent(ev) {
console.log(ev.target.value); // should print option1
}