Question

我使用json生成了一个由angular生成的表，我想让行内容可编辑，所以我添加了一些* ngif条件，所以我可以从只读切换到编辑，但是在我完成之后元素哈希引用isn＆当输入在* ngif之外时，不再工作了。

这里的HTML：

<table class="product-table">
  <thead class="product-table-head">
    <tr class="product-table-head-row">
      <td class="product-cell">id</td>
      <td class="product-cell product-head-cell">name</td>
      <td class="product-cell product-head-cell">price</td>
      <td class="product-cell product-head-cell">actions</td>
    </tr>
  </thead>
  <tbody class="product-table-body">
    <tr *ngFor="let product of products" class="product-table-body-row product-row">
      <td class="product-cell" #prodID>{{product.id}}</td>
      <td class="product-cell">
        <span *ngIf="editRow!==product.id">{{product.name}}</span>
        <span *ngIf="editMode&&editRow===product.id"><input type="text" #nameInputPut class="editInput"></span>
      </td>
      <td class="product-cell">
          <span *ngIf="editRow!==product.id">{{product.price}}$</span>
          <span *ngIf="editMode&&editRow===product.id"><input type="number" #priceInputPut class="editInput">$</span>
      </td>
      <td class="product-cell">
        <i class="fa icon fa-pencil" (click)="editProduct(prodID)" *ngIf="editRow!==product.id"></i>
        <i class="fa icon fa-save" (click)="putProduct(product.id,nameInputPut,priceInputPut)" *ngIf="editMode&&editRow===product.id"></i>
        <i class="fa icon fa-trash"></i>
      </td>
    </tr>
  </tbody>
</table>

这里处理的功能：

putProduct(productId,productName,productPrice){

let prodName = productName.value,
    prodPrice = productPrice.value;

 .....
}

我在控制台中收到错误消息：＆＃34; productName未定义＆＃34; 虽然我访问的是不在* ngif。

内的productId

解决这个问题的方法是什么？

Answer 1

为什么我们需要参考#nameInputPut。我想你应该使用ngModel的输入字段，如：

<input type="text" id="name" [(ngModel)]="product.name" name="name">

此外，在声明时或在构造函数中将product初始化为空JSON {}。因此，由于product.<something>最初为product，所以表达式undefined不会失败。

Angular5，引用* ngif中的dom元素

1 个答案: