Угловой: скрыть элементы

Question

Я получаю данные json из API.После этого я создаю таблицу с этими данными.

getValues(): Observable<Value[]> {
    return this.http.get<Value[]>(this.valuesUrl);
}

component.html

    <table>
        <thead>
            <tr>
                <th></th>
                <th>Category</th>
                <th>Product</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody *ngFor="let value of values">
            <tr *ngFor="let sku of value.skus">
                <td><input type="checkbox" value="{{sku.id}}"></td>
                <td>{{value.group.name}}</td>
                <td>{{sku.name}}</td>
                <td class="price">{{sku.price}}</td>
            </tr>
        </tbody>
    </table>
<button class="btn" (click)="addToCart()">Add to cart</button>

У меня есть флажки для всех записей в таблице.Мне нужно удалить проверенные записи из извлеченного массива после нажатия на кнопку.Я думаю, что я должен использовать фильтр, чтобы сделать это, но я бы не мог прочитать свойство фильтра.

Answer 1

Я создал пример для разработки этого.

Разметка:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Category</th>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody *ngFor="let value of values; let i = index;">
        <tr>
            <input type="checkbox" (change)="addChecked(i, $event.target.checked)"/>
            <td>Delete</td>
            <td>{{value}}</td>
        </tr>
    </tbody>
</table>
<button (click)="delete()">Delete</button>

Логика:

export class App {
    values = [1, 2, 3, 4];
    checked = [];

    constructor() {
    }

    addChecked(i, isChecked) {
        isChecked ? this.checked.push(i) : this.checked.splice(i, 1);
    }

    delete() {
        for (var i = this.checked.length - 1; i >= 0; --i) {
            this.values.splice(this.checked[i], 1);
        }
        this.checked = [];
    }
}

Предположим, что данные, извлеченные из API, хранятся вмассив values и отображается в таблице.В каждой строке есть флажок для выбора строки и изменения в флажке добавить / удалить элемент в массиве checked.Массив checked хранит индексы строк / значений.Кнопка удаления в конце таблицы привязывается методом delete().После щелчка циклически перемещайтесь по массиву checked и удаляйте элементы из массива values, и изменения автоматически отражаются.

Цикл выполняется в обратном порядке, так как значения индекса slice метода меняются при каждом удалении элемента измассив.

Вот Plnkr: Угловое удаление элемента из таблицы

Answer 2

Вы можете скрыть элементы с помощью *ngIF и использовать <ng-container> для своего цикла:

<ng-container *ngFor="let sku of value.skus">
   <tr *ngIF="!sku.isAddedToCart">
     <td><input type="checkbox" value="{{sku.id}}"></td>
     <td>{{value.group.name}}</td>
     <td>{{sku.name}}</td>
     <td class="price">{{sku.price}}</td>
   </tr>
</ng-container>

С sku.isAddedToCart логическим значением (например).