Question

因此，我有一个由模型（uniqueBusinessUnits）中的数组填充的mat select，当通过两种方式绑定到selectedUniqueBusinessUnit进行更改时，我试图记录所选的业务部门。但是，它似乎正在记录undefined。

HTML

   <mat-form-field >
      <mat-select  placeholder="Filter By BU"
      ([value])="selectedUniqueBusinessUnit"
      (selectionChange)="uniqueBusinessUnit=$event.value;eventBusinessUnitChange('change', $event)">
      <mat-option *ngFor="let uniqueBusinessUnit of uniqueBusinessUnits" [value]="uniqueBusinessUnit.business_Unit_Code">
          {{ uniqueBusinessUnit.business_Unit_Code }}
      </mat-option>
      </mat-select>
   </mat-form-field>

ts

   export class LandingPageComponent {
     uniqueBusinessUnits: Object [];
     selectedUniqueBusinessUnit: Object [];
     eventBusinessUnitChange(s, event) {
         console.log(this.selectedUniqueBusinessUnit);
     }
   }

Answer 1

通过查看您的模板，问题可能是：

(selectionChange)="uniqueBusinessUnit...

您应该这样做：

(selectionChange)="selectedUniqueBusinessUnit...

您正在尝试将值赋给错误的属性（哦，在您应用的那个点/状态下，uniqueBusinessUnit甚至不存在）！当用户单击其中一个值时，您正在对selectedUniqueBusinessUnit属性进行console.log（），该属性仍未定义（因为从技术上讲您从未影响过该值）。

一些建议

在您的组件（.ts）中，我认为selectedUniqueBusinessUnit不应是一个知道将包含唯一值的数组。

如果您有模型（如您所说），则应该使用它们。为什么可以使用TheModelYouCreated []时使用Object []？

eventBusinessUnitChange('change', event)：这两个参数在这里没有用，因为您直接在模板（.html）中分配了$ event.value。

Answer 2

@Daniel Haughton ..尝试一次

<mat-select  placeholder="Filter By BU" [(ngModel)]="selectedUniqueBusinessUnit" (ngModelChange)="eventBusinessUnitChange('change', $event)" >
    <mat-option *ngFor="let uniqueBusinessUnit of uniqueBusinessUnits" [value]="uniqueBusinessUnit.business_Unit_Code">
          {{ uniqueBusinessUnit.business_Unit_Code }}
    </mat-option>
</mat-select>

使用 ngModel 获取所选的选项。有关更多信息，请点击mat-select。

Answer 3

HTML 必须像这样 Daniel：

<mat-form-field >
      <mat-select  placeholder="Filter By BU"
      (selectionChange)="eventBusinessUnitChange($event.value)">
      <mat-option *ngFor="let uniqueBusinessUnit of uniqueBusinessUnits" [value]="uniqueBusinessUnit.business_Unit_Code">
          {{ uniqueBusinessUnit.business_Unit_Code }}
      </mat-option>
      </mat-select>
   </mat-form-field>

您将直接收到值 (business_Unit_Code)：TS

   export class LandingPageComponent {
     uniqueBusinessUnits: Object [];
     selectedUniqueBusinessUnit: Object [];
     eventBusinessUnitChange(value) {
         console.log(value);
     }

}

将以选择方式选择的字段传递给TS

3 个答案: