Angular2-删除后更新 UI答案

【问题标题】：Angular2- Update UI after deletingAngular2-删除后更新 UI
【发布时间】：2016-09-16 15:30:18
【问题描述】：

我有一个 angular2 应用程序，它的后端是 java。我有一份客户名单。当我单击删除客户时，客户被删除但列表没有更新。如果我手动刷新页面，则列表会更新。我尝试在删除方法的订阅中路由到列表组件，但不起作用。

list-customers.component.html

<tr [class.warning]="customer.isDefault == 1" *ngFor="let customer of customers | orderBy:['firstName'] | search:searchCustomer.value;let serial = index">
                <td>{{ serial+1 }}</td>
                <td>{{ customer?.firstName+' '+customer?.lastName}}</td>
                <td>{{ customer.email}}</td>
                <td>{{ customer.mobileNumber}}</td>
                <td>{{ customer.streetAddress}}</td>
                <td>{{ customer.priceList?.name}}</td>
                <td><a [routerLink]="['/loggedIn','customer','edit', customer.id ]"><i class="fa fa-edit fa-2x"></i></a></td>
                <td><a (click)="delete(customer)"><i class="fa fa-trash-o fa-2x"></i></a></td>
              </tr>

list-customers.component.ts

    ngOnInit()
    {
        this.refreshCustomersList();
    }

    delete(customer)
    {
        this.userService.delete(customer.id)
            .subscribe(
                success=>
                {
                    var index = this.customers.indexOf(customer, 0);
                    if (index > -1)
                    {
                        this.customers.splice(index, 1);
                    }
                }
            )

    }

    refreshCustomersList()
    {
        this._authHttp.get(
                this.appService.getApiUrl() + "api/customer/list"
            )
            .map(res=>res.json())
            .subscribe(
                successResponse=>
                {
                    this.customers = successResponse.data.customers;
                },
                () => console.log("Request Completed")
            )

    }
}

【问题讨论】：

标签： angular typescript angular2-routing angular2-template

【解决方案1】：

尝试在您的delete 函数中调用this.refreshCustomersList();，如下所示：

    delete(customer)
{
    this.userService.delete(customer.id)
        .subscribe(
            success=>
            {
                var index = this.customers.indexOf(customer, 0);
                if (index > -1)
                {
                    this.customers.splice(index, 1);
                    this.refreshCustomersList();
                }
            }
        )

}

这将在删除客户后更新 customers 数组。

【讨论】：

【解决方案2】：

你可以像这样使用 JavaScript 数组过滤器。

    this.userService.delete(customer.id)
    .subscribe(
        success=>
        {

             let newCustomers = this.customers.filter(item => item.id !== customer.id);
             this.customers = newCustomers;
        }
    )

【讨论】：

我认为这是最优雅和最直接的解决方案，虽然为了简单起见，我做了：this.customers = this.customers.filter(item => item.id !== customer.id);，而不是先分配给变量。
太棒了@Asamoah

【解决方案3】：

Splice 将返回删除的元素，而不是使用 slice 来返回删除后的结果数组，如：-

this.customers = this.customers.slice(index);

【讨论】：

【解决方案4】：

在 HTML 中输入以下代码：

(click)="delete(customer.length-1-i)".
//
deleteFieldValue(index) {
this.customer.splice(index, 1);
this.revervefordispaly();
}

//for reverse:

revervefordispaly(){
this.reversedProductdata.reverse();
}

【讨论】：

【解决方案5】：

我有几乎相同的情况，我有一系列产品。我必须让用户根据他们的选择删除产品。最后，如果数组中没有产品，那么我需要在不重新加载页面的情况下显示取消按钮而不是返回按钮。

我通过检查 ngAfterViewChecked() 生命周期钩子中的空数组来完成它。

products: Product[];
someCondition: boolean;

constructor(private cdr: ChangeDetectorRef) {}
// import { ChangeDetectorRef } from '@angular/core';

ngAfterViewChecked() {
    this.emptyArray();
}

emptyArray() {
    this.someCondition = this.products.length === 0 ? true : false;

    // run change detection explicitly
    this.cdr.detectChanges();
}

removeProduct(id) {
    // your logic for removing product.
}

【讨论】：

【解决方案6】：

我们可以按如下方式设置客户列表，而不是再次从 API 获取整个列表。它对我有用：

delete(customer)
{
    this.userService.delete(customer.id)
        .subscribe(
            success=>
            {
                var index = this.customers.indexOf(customer, 0);
                if (index > -1)
                {
                    this.customers = this.customers.splice(index, 1);
                }
            }
        )

}

【讨论】：