Отметить элемент как обновленный в Ng для l oop, используя Angular 8 - PullRequest
Новая
       53

Отметить элемент как обновленный в Ng для l oop, используя Angular 8

1 голос
/ 28 января 2020

У меня есть два набора таблиц, повторяющих одни и те же данные.

Таблица 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;
}

У меня такое чувство, что я делаю это сложнее, чем нужно.

1 Ответ

2 голосов
/ 28 января 2020

Что вам нужно сделать, это добавить свойство itemIsPending в глобальный список, в котором вы используете ngfor. И преобразуйте, если это, если item.pending отображает этот значок. 

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