将项目标记为使用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;
}

我有种感觉，我正在使这一过程变得更加困难。