时间戳

首页 > 解决方案 > 如何在angular4中获取多个输入字段的值？

angular - 如何在angular4中获取多个输入字段的值？

问题描述

我在 mat-table 中定义了输入字段。我想通过单击Next按钮访问 component.ts 文件中的这些值。我已经有一种单击按钮的方法，但想不出一种访问输入值的方法。我也尝试指定名称属性，但每个输入标签都是相同的。

HTML 代码：

<ng-container matColumnDef="npm">
                  <mat-header-cell *matHeaderCellDef  fxFlex = "15" style="margin-left: 1%;padding-left: 1%;">NPM</mat-header-cell>
                  <mat-cell *matCellDef="let row" fxFlex = "15"> 
                      <span style ="white-space: nowrap">
                          <input decimal = "true" value= '{{this.selectedAccount.occupancy.npm}}'  style ="display:inline-block; width:55%" #npmValueEntered  required> 
                      </span>
                  </mat-cell>
</ng-container>


<button mat-button [disabled] = "stepTwoFormGroup.invalid || overPercentage || disabledButtons" (click)="submit(stepper)" >Next</button>

标签： angularangular-material

解决方案

目前尚不清楚您需要如何访问这些值。但一个简单的解决方案是使用 ngModel 将输入绑定到数据，而不是从数据中初始化值：

<ng-container matColumnDef="npm">
    <mat-header-cell *matHeaderCellDef  fxFlex = "15" style="margin-left: 1%;padding-left: 1%;">NPM</mat-header-cell>
    <mat-cell *matCellDef="let row" fxFlex = "15"> 
        <span style ="white-space: nowrap">
            <input decimal = "true" [(ngModel)]='this.selectedAccount.occupancy.npm'  style ="display:inline-block; width:55%" #npmValueEntered  required> 
        </span>
    </mat-cell>
</ng-container>

然后，您的submit函数可以通过 访问该值this.selectedAccount.occupancy.npm。

但是，如果您需要，使用评论中建议的表格可以让您更好地控制。

推荐阅读