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

Question

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

Table 1 为活跃项

Table 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;
}

我觉得我让这件事变得比需要的更难了。

Answer 1

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

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

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

Mark item as updated in NgFor loop using Angular 8

javascript

uniqueidentifier

ngfor

angular

angular8

page.component.html

page.component.ts