主页 / coding / 问题 / 79179375
Accepted
Tim
Asked: 2024-11-12 07:10:41 +0800 CST

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

  • 772

我有一个 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 文件中的值？

谢谢！

html

1 个回答

  1. Best Answer

    是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>
    • 0

相关问题