Angular 6：將 select 框值的選定值傳遞給 ngSubmit 上的組件

Question

我正在使用 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：無法讀取未定義的屬性“值”

有人能告訴我為什么會這樣嗎

Answer 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>