Angular 6 在下拉列表中添加更改事件给出未定义值的错误

Question

我在每行数据处生成了一个下拉列表：

<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 行的下拉列表的值，我需要更改该值和该行的 ID，以便更新我的数据库。

我使用了(click)事件，但出现错误：

ERROR TypeError: Cannot read property 'value' of undefined at UnitEditComponent.push

方法如下：

updateUnitSituationStatus(){
    console.log(this.formGroup.controls['sitStatusControl'].value);
}

我尝试使用 (change) 事件，但也没有任何反应。

Answer 1

由于您在此处使用 sitStatus 表单组 <form [formGroup]="sitStatus"> 您也应该在该组中查找控件

this.sitStatus.controls['sitStatusControl'].value

Answer 2

我没试过 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
}

Angular 6 在下拉列表中添加更改事件给出未定义值的错误

Angular 6 adding change event on drop down list is giving an error of undefined value

angular

angular-material

angular6

onchange

event-binding