【问题标题】:Is it possible to pass the value of an Angular-generated input without an ID into a function?是否可以将没有 ID 的 Angular 生成输入的值传递给函数?
【发布时间】:2019-03-21 18:12:41
【问题描述】:

我正在尝试使表格上列中的单元格的值可编辑。问题是,由于表格是在 Angular 中使用来自 API 的值的 MatTableDataSource 动态生成的,因此单元格元素不能具有唯一的 ID。我怎样才能使它在模糊时(在编辑和更改单元格中的值之后)将该值传递给一个函数,然后该函数可以将该新值写入到 API 的请求中以更新它?

这是相关单元格列的 HTML:

<div>
  <table mat-table matSort (matSortChange)="sortData($event)" [dataSource]="sortedData">
<!-- Other columns -->
    <ng-container matColumnDef="maxInstalls">
       <th mat-header-cell *matHeaderCellDef>Max Installs</th>
       <td mat-cell *matCellDef="let profile">
       <input type="number" min="0" value="{{profile.maximumInstalls}}"> <!-- I just need the value of this input -->
       </td>
      </ng-container>
<!-- Other columns -->
      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr mat-row *matRowDef="let row; columns: columnsToDisplay;">
      </tr>
  </table>
</div>

【问题讨论】:

    标签: angular input


    【解决方案1】:

    怎么样

    <input type="number" min="0" value="{{profile.maximumInstalls}}" (blur)="onBlu(profile)"> 
    

    如果你想要输入的值,你需要创建一个对输入的引用并像下面这样使用它

    <input #valueInput type="number" min="0" value="{{profile.maximumInstalls}}" (blur)="onBlur(valueInput.value)"> 
    

    查看工作示例here

    【讨论】:

    • 那只返回从API获取的对象,而不是输入框本身的值。在模糊他们的焦点之前,我需要知道用户输入的值。
    • 该参考使它起作用。现在我只需要弄清楚为什么它有时将其标记为未使用的变量,即使我在函数中使用它。不过谢谢!这就回答了这个问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-24
    • 2016-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-08
    相关资源
    最近更新 更多