javascript - 使用 Angular 8 在 NgFor 循环中将项目标记为已更新

Question

我有两组表循环相同的数据。

表 1为活动项目

表 2为非活动项目

当用户选择一个项目时，我想通过显示“待定”指示器或徽章来将该项目标记为已更新（例如：用户选择复选框以使该项目处于活动状态）。

但是，我很难为每个项目创建一个唯一的标识符，以防用户恢复到他们的原始选择（例如：恢复到非活动状态）。我希望用户在提交之前可视化他们更新的项目。

page.component.html

<h1>Active</h1>
<table>
    <thead>...</thead>
    <tbody>
        <tr *ngFor="let selectedItemof itemDetailsInfo.getSelectedItems()">
            <td class="text-center">
                <span class="custom-checkbox">
                    <input type="checkbox"
                           id="{{selectedItem.id}}"
                           value="{{selectedItem.id}}"
                           (change)="itemDetailsInfo.getSelectedItems(); isUpdated(selectedItem.id)"
                           [(ngModel)]="selectedItem.selected" />
                    <label for="{{selectedItem.id}}">
                        <svg class="icon icon-20 green">
                            <use xlink:href="assets/images/icons.svg#circle-check" />
                        </svg>
                    </label>
                </span>
            </td>
            <td>
                {{selectedItem.displayName}}
                <span *ngIf="itemId.itemPending" class="badge badge-pill">Pending</span>
            </td>
        </tr>
    </tbody>
</table>

<h1>Inactive</h1>
<table>
    <thead>...</thead>
    <tbody>
        <tr *ngFor="let unSelectedItem of itemDetailsInfo.getUnSelectedItems()">
            <td class="text-center">
                <span class="custom-checkbox">
                    <input type="checkbox"
                           id="{{unSelectedItem.id}}"
                           value="{{unSelectedItem.id}}"
                           (change)="itemDetailsInfo.getUnSelectedItems(); isUpdated(unSelectedItem.id)"
                           [(ngModel)]="unSelectedItem.selected" />
                    <label for="{{unSelectedItem.id}}">
                        <svg class="icon icon-20 green">
                            <use xlink:href="assets/images/icons.svg#circle-check" />
                        </svg>
                    </label>
                </span>
            </td>
            <td>
                {{unSelectedItem.displayName}}
                <span *ngIf="itemId.itemPending" class="badge badge-pill">Pending</span>
            </td>
        </tr>
    </tbody>
</table>

page.component.ts

pending: boolean = false;
itemId: any;

...

isUpdated(id: any) {
  let itemId = id;
  itemId.itemPending = !itemId.itemPending;
}

我有一种感觉，我让这变得比它需要的更困难。

标签： javascriptangularangular8ngforuniqueidentifier

Answer 1

您需要做的是将 itemIsPending 属性引入到您正在使用 ngfor 的全局列表中。并转换 if that if item.pending 显示该徽章。

*ngIf="selectedItem.itemPending" class="badge