Angular 6：将选择框值的选定值传递给ngSubmit上的组件答案

【问题标题】：Angular 6 : Passing selected value of select box value to the component on ngSubmitAngular 6：将选择框值的选定值传递给ngSubmit上的组件
【发布时间】：2020-09-28 08:16:14
【问题描述】：

我正在使用 Angular 6 和 Angular 材料，我的表格如下

 <form (ngSubmit)="addDetails(line.value, menu.value)" [formGroup]="addMealForm">
 <mat-card class="mb-5 float-right w-100">
   <mat-form-field class="ml-5 mr-5 w-25">
     <mat-label>Menu</mat-label>
     <mat-select>
       <mat-option #menu *ngFor="let menu of menus" [value]="menu.value">
         {{menu.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>

   <mat-form-field  class="ml-5 mr-5 w-25">
     <mat-label>line</mat-label>
     <mat-select>
       <mat-option #line *ngFor="let line of lines" [value]="line.value">
         {{line.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>
   <button type="submit" mat-raised-button color="accent">
     <mat-icon>add</mat-icon>
     Add Meal
   </button>
   </mat-card>
 </form>

我正在尝试将下拉列表中的选定值发送到我的组件，如下所示

addDetails(line,menu) {
 console.log(line);
 console.log(menu);
}

由于某种原因，我无法做到这一点。我收到以下错误

TypeError：无法读取未定义的属性“值”

谁能告诉我为什么会这样

【问题讨论】：

查看{{line | json}}行的内容

标签： javascript angularjs angular angular-material

【解决方案1】：

我假设这是因为您发送 #line（这是许多 mat-options 的模板变量）而不是发送 mat-select 的实际值。

我会尝试：

<form (ngSubmit)="addDetails(selectLine.value, selectMenu.value)" 
  [formGroup]="addMealForm">
  <mat-card class="mb-5 float-right w-100">
    <mat-form-field class="ml-5 mr-5 w-25">
      <mat-label>Menu</mat-label>
      <mat-select #selectMenu>
        <mat-option #menu *ngFor="let menu of menus" [value]="menu.value">
          {{menu.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field  class="ml-5 mr-5 w-25">
      <mat-label>line</mat-label>
      <mat-select #selectLine>
        <mat-option #line *ngFor="let line of lines" [value]="line.value">
          {{line.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <button type="submit" mat-raised-button color="accent">
      <mat-icon>add</mat-icon>
      Add Meal
    </button>
  </mat-card>
</form>

【讨论】：