usmanwalana usmanwalana - 2 months ago 14
TypeScript Question

Angular2- Update UI after deleting

I have an angular2 app whose backend is in java. I have a list of customers. When i click to remove a customer , the customer is removed but the list does not update. If i manually refresh the page then the list updates. I tried routing to the list component in the subscribe of delete method but that does not work.

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

}
}

Answer

Try calling this.refreshCustomersList(); in your delete function like this:

    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();
                }
            }
        )

}

This will update the customers array after a customer is removed.

Comments