html 如何在ngFor循环中单击时将图标更改为输入

brccelvz 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(104)

我遇到过这种情况

<td *ngFor="let timesheet of task.timesheets; let i = index" class="w-4 position-relative">
   <div class="input-group">
        <input >
        <span class="input-group-text w-30"><em class="bi bi-clock-history" (click)="addOverHrsForTimesheet(timesheet)"></em></span>
        <span class="input-group-text w-30"><em class="bi bi-chat-right"></em></span>
   </div>
</td>

点击bi-clock-history图标时，我希望在用户可以输入一些值时将此范围更改为另一个输入。问题是，我在一行中有7个td，因此我如何确保只有图标，例如第一个td更改为输入，其他6个作为图标保留？
我想在for循环中获取元素的索引，但我不确定这是否是正确的方法

Html

来源：https://stackoverflow.com/questions/74706400/how-to-change-icon-into-input-on-click-inside-ngfor-loop

1条答案

按热度按时间

juzqafwq1#

我会将其作为一个单独的组件：

<td *ngFor="let timesheet of task.timesheets; let i = index" class="w-4 position-relative">
   <input-group [timesheet]='timesheet' />
   /* You can use event emitter to pass the data to the parent component */
</td>

并在子组件中将此部分与事件和样式沿着移动：

<div class="input-group">
     <input >
     <span class="input-group-text w-30"><em class="bi bi-clock-history" (click)="addOverHrsForTimesheet(timesheet)"></em></span>
     <span class="input-group-text w-30"><em class="bi bi-chat-right"></em></span>
</div>

这可以帮助您执行要从单独的组件部分发出的事件。

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何在ngFor循环中单击时将图标更改为输入

1条答案

相关问题

热门标签

最新问答