Angular2-删除后更新UI

发布时间：2020-12-17 17:22:21 所属栏目：安全来源：网络整理

导读：我有一个angular2应用程序,其后端是在 java中.我有一份客户名单.当我单击以删除客户时,客户将被删除,但列表不会更新.如果我手动刷新页面,则列表会更新.我尝试在delete方法的订阅中路由到列表组件,但这不起作用. 列表customers.component.html tr [class.warn

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

列表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>

列表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")
            )

    }
}

解决方法

尝试调用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数组.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!