无法在 Angular 7 中获取 select 的值

Question

这是我的 html:

<form class="row" (ngSubmit)="generatePdfFromOverview()" #generatePdfForm="ngForm">
    <select id="selectedSortOnItem" required [(ngModel)]="generatePdfForm.selectedSortOnItem"
        name="selectedSortOnItem" #selectedSortOnItem="ngModel">
            <option *ngFor="let sortOnItem of sortOnItems" [value]="sortOnItem">{{sortOnItem}}</option>
    </select>
    <button type="submit" class="btn btn-primary">Generate it!</button>
</form>

这些值在视图中显示正常。

但是当我 select 另一个时，.ts 文件中的值没有更新。尝试了很多东西。按照 Angular 文档中的示例进行操作，但似乎不起作用..

Answer 1

虽然这完全取决于您的 generatePdfFromOverview 方法，但您可以采取一些措施来解决此问题：

将generatePdfForm作为参数传递给generatePdfFromOverview，然后在其上使用value属性来获取表单的值。

<form 
  class="row" 
  (ngSubmit)="generatePdfFromOverview(generatePdfForm)" 
  #generatePdfForm="ngForm">

然后在你的组件中 Class:

generatePdfFromOverview(generatePdfForm) {
  console.log('Form Value: ', generatePdfForm.value);
}

这个 value 上面会有一个 selectedSortOnItem 属性，这就是您要找的东西。

这里有一个 Sample StackBlitz 供您参考。

Answer 2

原来这与 https://materializecss.com/

的问题有关

Materialise 的 javascript 导致 select 功能出现问题。

升级到 1.0.0 解决了这个问题。

无法在 Angular 7 中获取 select 的值

Can't get value of select in Angular 7

html-select

angular

angular7