在Angular 7中无法获得选择的价值

Posted 2023-02-22

【中文标题】在Angular 7中无法获得选择的价值

【英文标题】：Can't get value of select in Angular 7

【发布时间】：2019-04-22 23:55:06

【问题描述】：

这是我的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>

值在视图中显示良好。

但是，当我选择另一个值时，.ts 文件中的值不会更新。 尝试了很多东西。遵循 Angular 文档中的示例，但似乎不起作用..

【问题讨论】：

看看这个问题，和你的问题差不多：***.com/questions/46447459/…

更改你的模板变量名并检查

【参考方案1】：

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

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

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

然后在你的组件类中：

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

这个value 将有一个selectedSortOnItem 属性，这就是您要寻找的。​​p>

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

【参考方案2】：

原来这与https://materializecss.com/的问题有关

来自 Materialize 的 javascript 导致选择功能出现问题。

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