角度6:将选中框值的选定值传递给ngSubmit上的组件

Question

我使用的是角6和角材料，我有如下形式

 <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:无法读取未定义的属性值

有人能告诉我为什么会这样吗？

Answer 1

我假设这是因为您的发送#行(它是许多mat选项的模板变量)而不是发送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>