如何从变长表中获取输入值

Question

我有一个 Angular 应用程序，它有一个可变长度表，我希望用户能够在其中为每一行输入输入值。

这就是我想做的事情的核心。

用户从 p-fileUpload 选择多个文件后，我希望能够在表格中显示每个文件，并允许他们为每个记录添加附加数据（元数据）。

<tbody>
  <tr *ngFor="let file of files; let ii = index">
    <td>{{ file.name }}</td>    
    <td>{{ file.size }}</td>   
    <td>{{ file.type }}</td>                   
    <td>
      <!--Would like to be able to grab this value here-->
      <input type="text" placeholder="Enter Title">
    </td>
  </tr>
</tbody>

我想这应该是比较简单的，但是到目前为止我还没能想出解决办法。 如果我尝试通过将 formControlName 或 ngModel 分配给文本输入来实现这一点，那么这些实际上不起作用，因为它们是针对单个输入组件而不是表中的多个输入组件之一。

有没有办法为每行中的输入分配自己的唯一标识符，然后获取 ts 文件中的值？

谢谢！

Answer 1

ngModel

是解决这个问题的一个不错的选择。您需要做的就是确保

name

和

id

属性具有唯一的名称，这可以通过使用表

*ngFor

循环的索引来完成。最后重要的是，您需要将数据存储在当前行数据对象中(

file

)。

<tbody>
  <tr *ngFor="let file of files; let ii = index">
    <td>{{ file.name }}</td>    
    <td>{{ file.size }}</td>   
    <td>{{ file.type }}</td>                   
    <td>
      <!--Would like to be able to grab this value here-->
      <input 
        type="text" 
        placeholder="Enter Title" 
        [name]="'custom-'+ii"
        [id]="'custom-'+ii"
        [(ngModel)]="file.customInput">
    </td>
  </tr>
</tbody>