mat-select在SelectionChange()上返回未定义的

时间:2019-07-31 08:44:17

标签: angular-material angular7

我在(selectionChange)事件上发生了mat-select事件,我收到未定义为$event.value的值。它为第一个mat-option.mat-option返回值为“ All”的正确值,该值给出未定义

 <mat-form-field>
            <mat-select [(value)]="regionOption" (selectionChange)="regionSelectionChange($event)"
              placeholder="Region">
              <mat-option *ngFor="let region of regions" [value]="region.location_name">{{region.location_name}}</mat-option>
              <mat-option [value]="All" >All</mat-option>
            </mat-select>
 </mat-form-field>

// ts

regionSelectionChange(regionName)
{
     console.log(regionName);
}

2 个答案:

答案 0 :(得分:1)

将值绑定从[值]更改为值

<mat-option value="All">All</mat-option>

答案 1 :(得分:1)

我会这样:

TS代码:

export class FormFieldOverviewExample {

  regions: any[]= [{'location_name':"Pune"},{'location_name':"Mumbai"}];

  constructor(){
    this.regions.push({'location_name':"All"}); -- Will add a value in the constructor
  }
  regionSelectionChange(regionName) {
    console.log(regionName.value);
  }
}

HTML代码:

<mat-form-field>
    <mat-select [(value)]="regionOption" (selectionChange)="regionSelectionChange($event)" placeholder="Region">
        <mat-option *ngFor="let region of regions" [value]="region.location_name">{{region.location_name}}
    </mat-option>
    </mat-select>
</mat-form-field>

Working-Demo